0

以下代码的惊人问题：

<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>
  1. 单击一个部分的“全部”CB 会检查该部分内的所有其他 CB。正如预期的那样
  2. 再次单击某个部分的“所有”CB 将取消选中该部分内的所有其他 CB。正如预期的那样
  3. 再次单击某个部分的“全部”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保持显示即使在检查 DOM 时添加/删除了它们的属性，也未选中。#cb_x_xchecked="checked"#cb_x_x#cb_x_xchecked="checked"

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

4

2 回答 2

3

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

$(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);
   });
});
于 2013-01-30T17:23:25.807 回答
0

找到了解决方法：使用 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>
于 2013-01-31T08:54:48.910 回答