javascript – jQuery使用.removeClass()和.addClass()切换类无法正常工作

我按照下面的代码实现了切换方式.
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./tsaPu.png) top left no-repeat;
}
.CheckedCheckBox,.CheckedCheckBoxAll
{
   width: 25px;
   height: 25px;
   margin-top: -4px;
   background: transparent url(http://i.stack./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');
});

现在的问题是,当我点击未经检查的div时,它变成了检查div但是当我点击checked div时,它会进入未选中的功能,但是检查了类.
帮我.我没有得到什么问题.

这是jsfiddle链接：

http:///nscZA/3/

我正在使用的图片：

解决方法:

绑定事件保存在页面加载中,因此如果您希望类.CheckedCheckBox具有操作,则必须在添加类时添加绑定,并在删除类时删除绑定.但这不是一个好方法.使用toggleClass肯定是你需要的.

这里是我所做的一个小提琴：http:///nscZA/8/

我在复选框上绑定了一个偶数,所以你不必添加/删除它

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

它添加了已检查的类,并检查是否选中了所有复选框.

我很高兴你探索我的解决方案并询问是否有你不理解的东西.

请注意,我改变了你的html class / css.

欢呼

来源：http://www./content-1-214651.html