Thay đổi màu nền của div khi hộp kiểm được nhấp

Question

Tôi có một hình thức với một số hộp kiểm, như thế này:

<div><input type='checkbox' name='groupid' value='1'>1</div> 
<div><input type='checkbox' name='groupid' value='2'>2</div> 
<div><input type='checkbox' name='groupid' value='3'>3</div> 

Những gì tôi đang cố gắng làm là khi hộp kiểm được chọn, thay đổi màu nền của div và khi được bỏ chọn, hãy xóa màu nền. Làm thế nào tôi có thể làm điều này bằng cách sử dụng jquery?

Cảm ơn

Answer 1

jQuery:

$("input[type='checkbox']").change(function(){ 
    if($(this).is(":checked")){ 
     $(this).parent().addClass("redBackground"); 
    }else{ 
     $(this).parent().removeClass("redBackground"); 
    } 
}); 

CSS:

.redBackground{ 
    background-color: red; 
} 

tôi khuyên bạn nên sử dụng Add/Remove lớp, như trái ngược với việc thay đổi CSS của phụ huynh div trực tiếp.

DEMO: http://jsfiddle.net/uJcB7/

Answer 2

Một giải pháp với thuộc tính CSS trực tiếp thay đổi:

$(":checkbox").on("change", function() { 
    var that = this; 
    $(this).parent().css("background-color", function() { 
     return that.checked ? "#ff0000" : ""; 
    }); 
});​ 

DEMO:http://jsfiddle.net/YQD7c/

---

Một giải pháp khác sử dụng toggleClass:

$(":checkbox").on("change", function() { 
    $(this).parent().toggleClass("checked", this.checked); 
});​ 

đâu bạn xác định lớp checked trong CSS như sau:

.checked { 
    background-color: #ff0000; 
}​ 

DEMO:http://jsfiddle.net/YQD7c/1/

Answer 3

Tôi biết rằng đây là một chủ đề cũ, nhưng tôi đã tìm kiếm và câu trả lời này đã cho tôi hầu hết các cách. (cần một số tinh chỉnh cho WordPress) Vì vậy, nếu ai đó truy cập vào cùng một trang đang sử dụng WordPress, hãy cung cấp cho bạn một bức ảnh, làm việc tuyệt vời cho tôi.

The Script

jQuery("input[type='checkbox']").change(function(){ 
if(jQuery(this).is(":checked")){ 
    jQuery(this).parent().addClass("greenBackground"); 
} 
else{ 
    jQuery(this).parent().removeClass("greenBackground"); 
} }); 

CSS

.greenBackground{ 
background-color: #06530e; 
color: #ffffff;}