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

【问题标题】：jQuery, Chrome, and Checkboxes. Strange BehaviorjQuery、Chrome 和复选框。奇怪的行为
【发布时间】：2011-08-19 22:36:37
【问题描述】：

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

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

在谷歌浏览器中，我发现选中一个复选框会留下一些“残留物”，如果你愿意的话，那将不允许我使用“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 不会遇到这个问题。但是，我在这里发布了一个解决方案：Setting "checked" for a checkbox with jQuery?

【问题讨论】：

回复if($(this).is(':checked'))：试试if(this.checked)。不需要所有这些函数调用和字符串解析。详情：w3.org/TR/DOM-Level-2-HTML/html.html#ID-30233917
仅供参考：同样的问题出现在 Firefox 4 中。复选框被选中一次后，它不再起作用了。
这里解释了为什么它在 jQuery 1.6 中失败：edgarinvillegas.wordpress.com/2011/05/10/…

标签： jquery google-chrome checkbox

【解决方案1】：

而不是这个：

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

你应该这样做：

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

干杯

【讨论】：

也许你在 jQuery 1.6 中测试它：edgarinvillegas.wordpress.com/2011/05/10/…

【解决方案2】：

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

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

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

【讨论】：

通过 JavaScript 手动设置检查值是完美的。谢谢！
能否请您回答答案（通过 JavaScript 手动设置检查值）？
"jsfiddle" 之类的：$('foo')[0].checked=true - 假设您确定选择器中恰好有一个节点，否则请参阅 get()

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：