Question

以下代码的惊人问题：

<head>
    <script>
    $(function() {
        $('.select-all').click(function() {
            var isChecked = $(this).is(':checked');
            $(this).closest('section').find('input:checkbox').each(function() {
                $(this).attr('checked', isChecked);
            });
        });
    });
    </script>

</head>
<body>
    <section id="sect_1">
        <input type="checkbox" id="cb_1_1">1.1
        <input type="checkbox" id="cb_1_2">1.2
        <input type="checkbox" id="cb_1_3">1.3
        <input type="checkbox" class="select-all">All
    </section>
    <section id="sect_2">
        <input type="checkbox" id="cb_2_1">2.1
        <input type="checkbox" id="cb_2_2">2.2
        <input type="checkbox" id="cb_2_3">2.3
        <input type="checkbox" class="select-all">All"
    </section>
</body>

单击某个部分的“全部”CB将检查此部分中的所有其他CB。正如预期的那样
再次单击某个部分的“全部”CB，取消选中此部分中的所有其他CB。正如预期的那样
再次单击某个部分的“全部”CB不再检查此部分中的所有CB。

在Chrome和Firefox上进行了检查，我看到checked="checked"属性在每个<input type="checkbox" id="cb_x_x">内显示并消失，但不影响显示的CB

有什么想法吗？

修改

重要提示：上面的代码会修改DOM。点击后，当选中.select-all时，父部分中的所有#cb_x_x标记都会更新，并检查我可以看到的DOM：<input type="checkbox" id="cb_x_x" checked="checked">。

再次点击取消选中.select-all，DOM也会更新：所有#cb_x_x都会丢失其属性checked。

继续并再次点击以重新检查/重新取消选中.select-all，父节中的所有#cb_x_x标记仍会更新，checked="checked"属性会继续显示/消失在主要部分但中的所有#cb_x_x标记上，显示不会更新：所有#cb_x_x个CB仍然显示未选中，即使其属性{{1在检查DOM时添加/删除。

此处提供实时代码：http://jsbin.com/orehor/3/

Answer 1

从jQuery 1.6开始，用于修改元素prop的属性应该使用方法而不是attr，你也不需要each方法，jQuery调用each内部。

$(function() {
   $('.select-all').change(function() {
      $(this).siblings('input[type=checkbox]').prop('checked', this.checked);
      // $(this).closest('section').find('input[type=checkbox]').prop('checked', this.checked);
   });
});

Answer 2

找到修复：使用prop（）而不是attr（）。与JQuery 1.6+的向后兼容性被打破。见http://api.jquery.com/prop/

<script>
$(function() {
    $('.select-all').click(function() {
        $(this).closest('section').find('input:checkbox').prop('checked', $(this).is(':checked'));
    });
});
</script>

复选框工作一次，但然后停止

2 个答案: