jQuery,Chrome和Checkboxes。奇怪的行为

时间:2011-05-06 06:32:43

标签: jquery google-chrome checkbox

我查看了网站,似乎找不到这个问题的答案。如果它确实存在,请随意指导我提出的问题。

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

在谷歌浏览器中,我发现选中一个复选框会留下一些"残留",如果你愿意的话,这将不允许我使用" attrRemove(')来检查或取消选中该复选框。检查');"

有趣的是,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?

4 个答案:

答案 0 :(得分:9)

使用复选框时(特别是基于复选框的复杂逻辑基础)我总是试图避免复选框上的jQuery事件处理程序。在点击复选框和使用的浏览器时,jQuery中存在一个与事件触发顺序有关的错误:  您可以找到部分问题here的说明。引用:

  

似乎当您在复选框上触发click事件时,默认行为(切换checked属性)将在事件处理程序触发后发生。这与浏览器自然处理复选框单击事件时发生的情况相反 - 切换已检查的属性,然后执行事件处理程序。   固有点击和jQuery事件触发之间的操作顺序的这种差异可能会导致一个大问题,如果事件处理程序依赖于复选框的状态(如果您在复选框上有一个单击处理程序,则表示它可能会)。

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

答案 1 :(得分:4)

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

  

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

答案 2 :(得分:1)

而不是:

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

你应该这样做:

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

干杯

答案 3 :(得分:0)

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

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