jQuery使用.removeClass（）和.addClass（）切换类无法正常工作

Question

I have implemented toggling in my way as described code below. HTML:

<table>
    <thead>
        <tr>
            <th class="selectCol"><div class="unCheckedCheckBoxAll"></div></th>
            <th class="nosCol">Products</th>
        </tr>
    </thead>
    <tr>
        <td><div class="unCheckedCheckBox"></div></td>
        <td>ABCD</td>
    </tr>
    <tr>
        <td><div class="unCheckedCheckBox"></div></td>
        <td>PQRS</td>
    </tr>
</table>

CSS:

.unCheckedCheckBox, .unCheckedCheckBoxAll
{
   width: 25px;
   height: 25px;
   margin-top: -4px;
   background: transparent url(http://i.stack.imgur.com/tsaPu.png) top left no-repeat;
}
.CheckedCheckBox,.CheckedCheckBoxAll
{
   width: 25px;
   height: 25px;
   margin-top: -4px;
   background: transparent url(http://i.stack.imgur.com/tsaPu.png) 0 -60px;
}

jQuery:

$(".CheckedCheckBox").click(function () {
    $(this).removeClass('CheckedCheckBox').addClass('unCheckedCheckBox');
    if ($(".CheckedCheckBox").length == 0) {
        $('.CheckedCheckBoxAll').removeClass('CheckedCheckBoxAll').addClass('unCheckedCheckBoxAll');
    }
});
$(".unCheckedCheckBox").click(function () {
    $(this).removeClass('unCheckedCheckBox').addClass('CheckedCheckBox');
    if ($(".unCheckedCheckBox").length == 0) {
        $('.unCheckedCheckBoxAll').removeClass('unCheckedCheckBoxAll').addClass('CheckedCheckBoxAll');
    }
});
$(".CheckedCheckBoxAll").click(function () {
    $(this).removeClass('CheckedCheckBoxAll').addClass('unCheckedCheckBoxAll');
    $('.CheckedCheckBox').removeClass('CheckedCheckBox').addClass('unCheckedCheckBox');
});
$(".unCheckedCheckBoxAll").click(function () {
    $(this).removeClass('unCheckedCheckBoxAll').addClass('CheckedCheckBoxAll');
    $('.unCheckedCheckBox').removeClass('unCheckedCheckBox').addClass('CheckedCheckBox');
});

Now the problem is, when I click on unchecked div, it becomes checked div but when I click on checked div, it goes in unchecked function though class is checked. Help me. I am not getting what's problem.

Here is the jsfiddle link:

http://jsfiddle.net/nscZA/3/

Image I am using:

Answer 1

IF you want to do it this way, you should be doing this using the .on function: reason, you will not have the function (click event management) bound properly for classes it does not currently hold by doing it the way you have.

$(document).on('click','.unCheckedCheckBox',function () {...rest of your function

NOTE: if possible, put the bind on the closest wrapper, like give the table wrapper and id and do:

$('#mytableid').on('click','.unCheckedCheckBox',function () {

jQuery 1.9.1 example: http://jsfiddle.net/nscZA/6/

NOTE Does not use the sprites (not loading) but uses colors

---

EDIT: older delegate with table id:

<table id='mytablewrapper'>

syntax is slightly different:

$('#mytablewrapper').delegate(".CheckedCheckBox", 'click', function () {

delegate example: http://jsfiddle.net/nscZA/7/

NOTE Does not use the sprites (not loading) but uses colors

Answer 2

Bind event are saved on page load, so if you want the class .CheckedCheckBox to have an action, you must add the binding when you add the class and remove the binding when you remove the class. But this is not a good approach. Using toggleClass is certainly what you need.

Here a fiddle of what i did : http://jsfiddle.net/nscZA/8/

I bind an even on the checkbox so you dont have to add/remove it

$(".checkBox").click(function () {
    $(this).toggleClass('isChecked');
    if ($(".checkBox").length == $(".isChecked").length) {
       $('.checkBoxAll').addClass('checkAllChecked');
    }else{
        $('.checkBoxAll').removeClass('checkAllChecked');
    }
});

It add the class checked and check if all checkbox are checked.

I sugest you explore my solution and ask question if there is something you dont understand.

Note that i changed a little bit your html class / css.

Cheer