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>

.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;
}

$(".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');
});

jQuery:

<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>

.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;
}

$(".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');
});

现在的问题是，当我点击unchecked div时，它变成checked div，但当我点击checked div时，它进入unchecked函数，尽管类被选中。 帮助我。我不明白有什么问题

以下是JSFIDLE链接：

我正在使用的图像：

---

如果您想这样做，您应该使用

。在

函数：原因上，您将无法通过您的方式为当前未持有的类正确绑定函数（单击事件管理）

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

注意：如果可能的话，将绑定放在最近的包装上，比如给出表包装和id，然后执行：

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

jQuery 1.9.1示例：

注意：不使用精灵（不加载），但使用颜色

---

编辑：表id为的旧代理：

<table id='mytablewrapper'>

代表示例：

---

注意：不使用精灵（不加载），而是使用颜色

绑定事件保存在页面加载上，因此如果希望类

.CheckedCheckBox

具有操作，则必须在添加类时添加绑定，在移除类时移除绑定。但这不是一个好办法。使用toggleClass当然是您所需要的

下面是我所做的一些事情：

我在

复选框中绑定了一个偶数，因此您不必添加/删除它

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

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

我建议你们研究一下我的解决方案，如果有什么你们不明白的地方，可以问我一个问题

请注意，我对html类/css做了一点修改

Chee
如果您的小提琴中没有加载jQuery，请在左侧选择它。是否使用
div
元素作为按钮？为什么？@undefined实际上在我的项目中，我的头想要像上图一样的复选框。因此，我使用了这种方法。JSFIDLE在这里什么都不做（我使用的是Chrome）sprite img无法获取编辑似乎@IT初学者在小提琴中使用的是jQuery 1.6.4，因此使用
.delegate（）
应该是首选method@MarkSchultheiss我在他/她的小提琴里说。。您不能仅仅在小提琴中更改jQuery包来显示它的工作原理。。你必须使用他/她给你的东西-或者至少建议他们必须更改他们的库以使用你的方法我只是将fildle jQuery版本建立在最后保存的版本上（不是我的版本）…旧版本和代表：感谢@markschultheis今天的课堂课！我没有提到关于表的问题。您的JSFIDLE没有根据您在此页面上设置的示例做出响应。这是解决的问题，谢谢Karl AndréGagnon，我已经更新了您的答案：更新的链接：