jQuery、Chrome 和复选框。奇怪的行为

Question

我浏览了该网站，似乎找不到这个问题的答案。如果确实存在，请随时引导我回答上述问题。

我目前正在尝试执行一些基于树的复选框操作，并且遇到了一些我觉得奇怪的行为。

在 Google Chrome 中，我发现检查复选框会留下一些“残留物”，如果您愿意的话，这将不允许我使用“attrRemove('checked');”检查或取消选中该复选框。

有趣的是，Internet Explorer (9) 具有我想要的结果。请在 Chrome 和 IE 中查看这个 jsFiddle 以更好地比较效果。

http://jsfiddle.net/xixionia/9K5ft/

任何人都可以解释这些差异，以及我如何解释或许能够选中/取消选中 chrome 中已“手动”选中的复选框？

HTML

<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />

JavaScript

$(':checkbox').click(function(e) {

    if($(this).is(':checked')) {
        $(':checkbox').attr('checked', 'checked');
    } else {
        $(':checkbox').removeAttr('checked');
    }
});

预先感谢您的帮助。 :)

编辑：

我能够找到这个解决办法。如果其他人有任何其他解决方案，请告诉我，我会将其标记为解决方案。 :)

$(':checkbox').click(function(e) {
    var value = this.checked;
    $(':checkbox').each(function(){ this.checked = value; });
});

编辑：

事实证明，这个问题是 jQuery 1.6 特有的。以前版本的 jQuery 不会遇到此问题。但是，我在这里发布了一个解决方案： 使用 jQuery 将复选框设置为“选中”？

Answer 1

当使用复选框（尤其是基于复选框的复杂逻辑）时，我总是尝试避免在复选框上使用 jQuery 事件处理程序。 jQuery 中存在一个错误，该错误与单击复选框和使用的浏览器时事件触发的顺序有关：
您可以找到部分问题的描述此处。引用：

似乎当您触发复选框上的单击事件时，默认行为（切换选中的属性）会在事件处理程序触发后发生。这与浏览器自然处理复选框单击事件时发生的情况相反 - 切换选中属性，然后执行事件处理程序。
如果事件处理程序无论如何都依赖于复选框的状态，那么固有单击和 jQuery 事件触发之间的操作顺序差异可能会导致一个大问题（如果您在复选框上有一个单击处理程序，则意味着它可能会这样做） ）。

jQuery 将此称为一项功能，因为它从一开始就存在，将其更改为正确的行为只会杀死许多现有的应用程序。我经常遇到复选框和“选中”的问题，只是因为事件触发得太晚了。所以我只使用原生JS方式： input.checked 。

Answer 2

来自： http://api.jquery.com/prop/ 您应该使用 prop 而不是 attr

尽管如此，关于checked属性要记住的最重要的概念是它与checked属性并不对应。该属性实际上对应于 defaultChecked 属性，并且应该仅用于设置复选框的初始值。 checked 属性值不会随着复选框的状态而改变，而checked 属性却会改变。

Answer 3

而不是这个：

$(':checkbox').removeAttr('checked');

你应该这样做：

$(':checkbox').attr('checked', false);

干杯

Answer 4

我遇到了同样的问题，并在 chrome 中使用以下代码解决了。希望它会有所帮助。

$("#allchkbox").click(function() {
    if(this.checked) {
        $(".ItemChkbox").each(function() {
            this.checked = true;
        });
    }
    else {
        $(".ItemChkbox").each(function() {
            this.checked = false;
        });
    }
});