4

我已经按照下面描述的代码实现了切换。 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，但是当我单击选中的 div 时，尽管选中了类，但它进入了未选中的函数。帮我。我没有得到什么问题。

这是jsfiddle链接：

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

我正在使用的图片：

图片

4

2 回答 2

4

如果你想这样做，你应该使用.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/

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

于 2013-05-03T13:38:53.297 回答
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 类/css。

欢呼

于 2013-05-03T13:53:09.577 回答