Question

我按照下面的代码实现了切换方式。的 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');
});

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

这是jsfiddle链接：

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

我正在使用的图片：

Answer 1

如果您想这样做，您应该使用.on函数执行此操作：原因是，您不会通过执行当前未持有的类正确绑定函数（单击事件管理）就像你一样。

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

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

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

jQuery 1.9.1示例：http://jsfiddle.net/nscZA/6/

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

编辑：包含表格ID的旧代表：

<table id='mytablewrapper'>

语法略有不同：

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

委托示例：http://jsfiddle.net/nscZA/7/

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

Answer 2

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

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

我在checkbox绑定一个偶数，所以你不必添加/删除它

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

添加选中的班级并检查是否选中了所有复选框。

我很高兴你探索我的解决方案并询问是否有你不理解的事情。

请注意，我改变了你的html class / css。

啦啦队

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

2 个答案: