checkbox在jquery版本1.9 以上用attr不可重复操作的问题【附解决方案】

昵称10504424 2013-11-18

展开全文

最近做个项目，需要重复多次更改checkbox的状态，使用jquery 1.10.2的最新版本时发现，对checkbox的选中状态无法多次选中。测试代码如下：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www./1999/xhtml">
 3 <head runat="server">
 4     <title></title>
 5     <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8             // 全选
 9             $("#btnCheckAll").bind("click", function () {
10                 $("[name = chkItem]:checkbox").attr("checked", true);
11             });
12
13             // 全不选
14             $("#btnCheckNone").bind("click", function () {
15                 $("[name = chkItem]:checkbox").attr("checked", false);
16             });
17
18             // 反选
19             $("#btnCheckReverse").bind("click", function () {
20                 $("[name = chkItem]:checkbox").each(function () {
21                     $(this).attr("checked", !$(this).attr("checked"));
22                 });
23             });
24
25             // 提交
26             $("#btnSubmit").bind("click", function () {
27                 var result = new Array();
28                 $("[name = chkItem]:checkbox").each(function () {
29                     if ($(this).is(":checked")) {
30                         result.push($(this).attr("value"));
31                     }
32                 });
33
34                 alert(result.join(","));
35             });
36         });
37     </script>
38 </head>
39 <body>
40     <div>
41         <input name="chkItem" type="checkbox" value="今日话题" />今日话题
42         <input name="chkItem" type="checkbox" value="视觉焦点" />视觉焦点
43         <input name="chkItem" type="checkbox" value="财经" />财经
44         <input name="chkItem" type="checkbox" value="汽车" />汽车
45         <input name="chkItem" type="checkbox" value="科技" />科技
46         <input name="chkItem" type="checkbox" value="房产" />房产
47         <input name="chkItem" type="checkbox" value="旅游" />旅游
48     </div>
49     <div>
50         <input id="btnCheckAll" type="button" value="全选" />
51         <input id="btnCheckNone" type="button" value="全不选" />
52         <input id="btnCheckReverse" type="button" value="反选" />
53         <input id="btnSubmit" type="button" value="提交" />
54     </div>
55 </body>
56 </html>

第一次点“全选时”可以选中，再点“全不选”也正常取消选中，然后再点“全选”时发现操作没效果了。通过attr("checked")读取可以获得checked的内容，可见复选框的值已经是正确了，但是实际页面却不能正常显示。下载几个更新版本发现，最后正常的版本为1.8.3,从1.9.1开始到最新的2.0.3都无法正常显示。

访问jquery官方网站时发现，在1.9.0发布的时候就已经有人提出此问题，但是一直没有解决。折腾了几个小时调试，原来是jquery库的问题，有点纠结，无奈只能用老版本的了。

在查阅园子的文章时，有人提到了1.9以后的解决方案：http://www.cnblogs.com/Kummy/archive/2013/05/03/3046387.html

经测试此方法可以解决1.9以后点击不中的问题，但是无法根本解决不可重复操作的BUG。

-------------------------------------------------------------------------------------------------

感谢nobody1评论提示，可以使用prop代替attr设置和获取数据，查询官方API得到解释如下：

The .prop() method is a convenient way to set the value of properties—especially when setting multiple properties, using values returned by a function, or setting values on multiple elements at once. It should be used when setting selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, or defaultSelected. Since jQuery 1.6, these properties can no longer be set with the .attr() method. They do not have corresponding attributes and are only properties.

.prop()方法是一种简便的设置值得方式，特别是多属性、使用函数返回值或者一次性在多个elements中设置数值。在设置selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 或者defaultSelected时应该使用本方法。从jQuery1.6起，这些属性不再能够用.attr()方法设置了，它们没有相当的attributes，只有properties。

Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the value property of input elements, the disabledproperty of inputs and buttons, or the checked property of a checkbox. The .prop() method should be used to set disabled and checked instead of the .attr() method. The .val()method should be used for getting and setting value.

Properties可以改变DOM元素的动态站台，不适用序列化的attribue。比如input的value属性、input和button的disabled属性，或者checkbox的checked属性。这时应该使用.prop()来替代.attr()来设置disabled和checked。.val()用于获取或者设置其value值。