选中复选框后，如何更改DIV的颜色？

Question

I want to change the color of the DIV when a checkbox is checked. I want to do this in jQuery. I have tried this :

 if($('#checkboxTest').is(':checked'))
    {
        $('.alertWrapper').css('background-color', 'blue');
    }

But it is not working.. any help?

Answer 1

You need to use .change() event to keep track of the state of your checkbox:

$('#checkboxTest').change(function() {
    if($(this).is(':checked'))
    {
        $('.alertWrapper').css('background-color', 'blue');
    } else {
        // Your code here will fired when the checkbox is unchecked
    }
}).change(); // <-- Trigger the change event on page load

Answer 2

You need to use change event :

$('#checkboxTest').change(function() {
   var c = this.checked ? 'blue' : 'transparent';
   $('.alertWrapper').css('background-color', c);
});

Working demo

Answer 3

You can use the following (with click event):

$('#checkboxTest').click (function ()
{
 var thisCheck = $(this);
 if (thischeck.is (':checked'))
 {
  // your stuff
 }
});