jquery复选框选中的bug问题的解决和分析

在做这个项目的时候，我遇到了一个BUG，jQuery checkbok复选框被选中并取消了。在我意识到发生了什么之前，我咨询了大神。记录在这里，给大家分析一下。

代码优先：

复制代码如下：表格你最喜欢的运动是什么？输入类型=' checkbox ' id=' checked all '/全选/全选无br/输入类型=' checkbox' name=' items' value=' football '/足球输入类型=' checkbox' name=' items' value='篮球'/篮球输入类型=' checkbox ' name=' items ' value='乒乓球'/乒乓球br/输入类型=' button ' id=' send ' value=' submit '/form

复制代码如下： $(“#全部选中”)。单击(function () {if ($ (this))。是(' : Checked '){ $('[name=items]: Checkbox ')。attr ('checked '，true)；} else { $('[name=items]: checkbox ')。attr('checked '，false)；} });

第一次执行，没问题，但是第二次执行有问题又不能选择

解决方法：将attr()替换为prop()

复制代码如下： $(“#全部选中”)。单击(function () {if ($ (this))。是(' : Checked '){ $('[name=items]: Checkbox ')。道具('选中'，真)；} else { $('[name=items]: checkbox ')。prop('checked '，false)；} });

PS:prop道具()和属性()之间的差异：

最近在iteye新闻看到jQuery已经更新到1.6.1了。与以前的版本相比，最大的变化是增加了。正确方法。酪prop()方法和。attr()方法在字面上很难区分。在汉语中，属性和属性都表示“属性”。根据这篇博文(JavaScript : mtmp(0)；)，简要翻译了的用法。prop()和。attr():

1.从1.5.2升级到1.6.1

通过引入新方法。prop()和的变化。attr()，jQuery1.6.1引发了关于属性和属性的区别和关系的热烈讨论。同时，1.6.1也解决了一些向后兼容的问题。从1.5.2升级到1.6.1时，不需要修改任何属性代码。

以下是对jQuery1.6和1.6.1中属性模块的更改以及的首选用法的描述。attr()方法和。prop()方法。但是，如前所述，jQuery1.6.1允许您使用。attr()方法，就像它以前在所有情况下使用的一样。

2.发生了什么变化

Attributes模块的更改消除了属性和属性之间的模糊性，但它在jQuery社区中引起了一些混乱，因为1.6之前的所有版本都使用了一个方法()。attr())来处理属性和属性。然而，旧的。attr()方法有一些bug，很难维护。JQuery1.6.1更新了属性模块并修复了几个错误。

特别是，布尔属性，如选中、选中、只读和禁用，在1.6.1和1.6之前的版本中处理相同。这意味着以下代码：

复制代码如下： $(“:”复选框)。attr(“选中”，真)；$(“选项”)。attr(“选中”，真)；$(“输入”)。attr("readonly "，true)；$(“输入”)。attr(“禁用”，真)；

甚至这样的代码：

复制代码如下： if($(“:复选框”)。attr(" checked "){/*做点什么*/}

在1.6.1中，没有必要为了保持之前预期的运行结果而进行任何更改。

为了改变。jQuery1.6中的attr()方法理解清楚了，下面是一些使用的例子。attr()。虽然它在以前版本的jQuery中工作正常，但它必须被。prop()方法现在：

首先。窗口或文档中使用的attr()方法在jQuery1.6中无法正常工作，因为窗口和文档不能有属性。它们包含必须由操作的属性(例如，位置或就绪状态)。prop()方法或简单地通过javascript本机方法。在jQuery1.6.1中，使用。窗口和文档中的attr()将自动转换为使用。道具而不是抛出错误。

其次，由于上述检查、选择和其他布尔属性与其对应属性之间的特殊关系，因此对这些属性进行了特殊处理。基本上，属性就是您在以下html中看到的内容：

input type=" checkbox " checked=" checked "布尔属性(如checked)仅设置为默认值或初始值。在checkbox元素中，无论checkbox元素是否被选中，在加载页面时都会设置选中的属性。

属性是浏览器用来记录当前值的。通常，属性反映了它们相应的属性(如果存在的话)。但是布尔属性不是这样。当用户单击复选框元素或选择选择元素的选项时，布尔属性保持最新。然而，对应的布尔属性是不同的。如上所述，它们只被浏览器用来保存初始值。

复制代码如下： $(“:”复选框)。获取(0)。选中=真；//与$(':checkbox:first ')相同。道具(“选中”，真)；

在jQuery1.6中，如果使用以下方法设置checked:复制代码如下： $(“: checkbox”)。attr(“选中”，真)；

checkbox元素不会被选中，因为它是一个需要设置的属性，但是您的所有设置都是初始值。

然而，当jQuery1.6发布时，jQuery团队意识到，当浏览器只关心页面加载时，设置一些值并不是特别有用。因此，为了保持。attr()方法，我们可以继续使用。方法来获取和设置这些布尔属性。

最常见的属性有选中、选中、禁用和只读，但以下是使用动态获取和设置布尔属性的完整列表。jQuery1.6.1支持的attr():

自动对焦、自动播放、异步、选中、控制、延迟、禁用、隐藏、循环、多重、打开、只读、必需、限定范围、选定(译者注：大部分是html5的新属性)

建议使用。prop()方法来设置这些布尔属性。即使这些用例没有转换为使用。prop()方法，您的代码仍然可以在jQuery1.6.1中正常运行。

以下是一些属性和特性的列表。在正常情况下，您应该使用它们相应的方法(参见下面的列表)来获取和设置它们。下面是第一个用法，但是。attr()方法可以在所有属性情况下运行。

注意：下面也列出了一些DOM元素的属性，但是只在新的中运行。prop()方法

*例如， window.location**如果需要的话结束)。宽度()

都不是。attr () nor。prop()应该用于获取/设置值。使用。方法(即使您使用。attr('value '，' somevalue ')，可以像1.6之前一样继续运行)

3.首选用法概述

那个。prop()方法应该用于处理布尔属性/属性和html中不存在的属性(如window.location)。所有其他属性(您在html中看到的属性)都可以并且应该继续使用。attr()方法。

上面的总结已经描述的够清楚了，不需要我再总结了。