首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >jQuery,Chrome和复选框。奇怪行为

jQuery,Chrome和复选框。奇怪行为
EN

Stack Overflow用户
提问于 2011-05-06 06:32:42
回答 4查看 15.5K关注 0票数 13

我环顾了一下网站,似乎找不到这个问题的答案。如果这个问题确实存在的话,请告诉我这个问题。

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

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

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

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

有人能解释这些差异吗?我怎样才能选中/取消选中“手工”选中的铬复选框呢?

代码语言:javascript
运行
复制
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />

JavaScript

代码语言:javascript
运行
复制
$(':checkbox').click(function(e) {

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

提前谢谢你的帮助。:)

编辑:

我在周围找到了这份工作。如果其他人有其他解决方案,请告诉我,我会把它标记为解决方案。:)

代码语言:javascript
运行
复制
$(':checkbox').click(function(e) {
    var value = this.checked;
    $(':checkbox').each(function(){ this.checked = value; });
});

编辑:

事实证明,这个问题是jQuery 1.6特有的。早期版本的jQuery不受此问题的影响。然而,我已经在这里发布了一个解决方案:为带有jQuery的复选框设置“选中”?

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2015-10-01 23:46:56

出发地:http://api.jquery.com/prop/您应该使用的是道具而不是attr

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

票数 5
EN

Stack Overflow用户

发布于 2011-05-06 06:58:20

在使用复选框(特别是基于复选框的复杂逻辑)时,我总是尽量避免复选框上的jQuery事件处理程序。jQuery中有一个与单击复选框和使用的浏览器时触发事件顺序有关的错误:您可以找到部分问题这里的描述。引用如下:

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

jQuery称它为一个特性,因为它从一开始就已经存在,并将其更改为正确的行为只会扼杀那么多现有的应用程序。我经常遇到复选框和“检查”的问题,仅仅因为事件被触发得太晚。所以我只使用原生的JS方式: input.checked。

票数 9
EN

Stack Overflow用户

发布于 2011-05-06 06:36:11

而不是这样:

代码语言:javascript
运行
复制
$(':checkbox').removeAttr('checked');

你应该这么做:

代码语言:javascript
运行
复制
$(':checkbox').attr('checked', false);

干杯

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5907645

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档