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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

     <title></title>

     <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(function () {

             // 全选

             $("#btnCheckAll").bind("click", function () {

                 $("[name = chkItem]:checkbox").attr("checked", true);

             });

             // 全不选

             $("#btnCheckNone").bind("click", function () {

                 $("[name = chkItem]:checkbox").attr("checked", false);

             });

             // 反选

             $("#btnCheckReverse").bind("click", function () {

                 $("[name = chkItem]:checkbox").each(function () {

                     $(this).attr("checked", !$(this).attr("checked"));

                 });

             });

             // 提交

             $("#btnSubmit").bind("click", function () {

                 var result = new Array();

                 $("[name = chkItem]:checkbox").each(function () {

                     if ($(this).is(":checked")) {

                         result.push($(this).attr("value"));

                     }

                 });

                 alert(result.join(","));

             });

         });

     </script>

 </head>

 <body>

     <div>

         <input name="chkItem" type="checkbox" value="今日话题" />今日话题

         <input name="chkItem" type="checkbox" value="视觉焦点" />视觉焦点

         <input name="chkItem" type="checkbox" value="财经" />财经

         <input name="chkItem" type="checkbox" value="汽车" />汽车

         <input name="chkItem" type="checkbox" value="科技" />科技

         <input name="chkItem" type="checkbox" value="房产" />房产

         <input name="chkItem" type="checkbox" value="旅游" />旅游

     </div>

     <div>

         <input id="btnCheckAll" type="button" value="全选" />

         <input id="btnCheckNone" type="button" value="全不选" />

         <input id="btnCheckReverse" type="button" value="反选" />

         <input id="btnSubmit" type="button" value="提交" />

     </div>

 </body>

 </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值。

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

  1. jQuery设置checkbox全选（区别jQuery版本）

    jQuery设置checkbox全选在网上有各种文章介绍,但是为什么在我们用他们的代码的时候就没有效果呢? 如果你的代码一点错误都没有,先不要急着怀疑人家代码的正确性,也许只是人家跟你用的jQuery ...

  2. jQuery版本引发的血案 iframe error 和 checkbox 无法勾选

    问题介绍: 1.由于我们的项目里面用了很多Iframe,在初始话加载的时候页面就会报错.一开始调试很久没找到什么原因,看打印结果页面会被两次load,只能一步步找, 最后发现在document rea ...

  3. jQuery1.9+ 废弃的函数和方法 升级Jquery版本遇到的问题

    面临问题 很久没关注JQuery了,今天突然想升级一下系统中使用的jquery版本,突然发现,升级JQuery版本到1.9之后出现了很多问题,比如:$.browser is undefined.突然就 ...

  4. js,onblur后下一个控件获取焦点判断、html当前活跃控件、jquery版本查看、jquery查看浏览器版本、setTimeout&setInterval

    需求: input控件在失去焦点后直接做验证,验证通不过的话,显示相应错误.但是如果失去焦点后点击的下个控件是比较特殊的控件(比如,退出系统),那么不执行验证操作,直接退出系统(防止在系统退出前,还显 ...

  5. 在同一个页面使用多个不同的jQuery版本，让它们并存而不冲突

    - jQuery自诞生以来,版本越来越多,而且jQuery官网的新版本还在不断的更新和发布中,现已经达到了1.6.4版本,但是我们在以前的项目中就已经使用了旧版本的jQuery,比如已经出现的:1.3 ...

  6. 在同一个页面中加载多个不同的jQuery版本

    <!-- 从谷歌服务器加载jQuery最新版本--> <script type="text/javascript" src="http://ajax.g ...

  7. 处理jquery版本之间冲突

    处理jquery版本之间冲突 前端开发们都知道jquery版本有好多,之间冲突很纠结.比如我刚来这公司的时候,后端的哥们用的是jQuery 1.3.2,我了个去,那哥们好久没更新了.我写的效果插件都是 ...

  8. 查看当前Jquery版本

    <script type="text/javascript"> $(document).ready(function(){ alert(jQuery.fn.jquery ...

  9. JS/Jquery版本的俄罗斯方块(附源码分析)

    转载于http://blog.csdn.net/unionline/article/details/63250597 且后续更新于此 1.前言 写这个jQuery版本的小游戏的缘由在于我想通过从零到有 ...

随机推荐

  1. Python 函数和模块

    200 ? "200px" : this.width)!important;} --> 介绍 在python中也存在函数的概念,标准的函数我们可以叫内置函数,这类函数可以直接 ...

  2. C#如何转换2位数字表示的年

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:C#如何转换2位数字表示的年.

  3. 你真的知道C#的TryParse吗？

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:你真的知道C#的TryParse吗?.

  4. 最火的Android开源项目(一)

    GitHub在中国 的火爆程度无需多言,越来越多的开源项目迁移到GitHub平台上.更何况,基于不要重复造轮子的原则,了解当下比较流行的Android与iOS开源项 目很是必要.利用这些项目,有时能够 ...

  5. hdu 1062 Text Reverse 字符串

    Text Reverse                                                                                  Time L ...

  6. 分页存储过程--From：桌面备份 -> sql2005新功能.docx

    二.以下示例将返回行号为 50 到 60(含)的行,并以 OrderDate 排序. USE AdventureWorks; GO WITH OrderedOrders AS (SELECT Sale ...

  7. ubuntu13.04 Thinkpad W520安装nvidia显卡驱动

    Ubuntu13.04 amd64 Thinkpad W520安装Nvidia显卡驱动 曾经在ubuntu11.10上成功安装Nvidia显卡驱动.但是自从机器(Thinkpad W520)更新到13 ...

  8. android selector 背景选择器的使用， button （未点击，点击，选中保持状态）效果实现

              android selector 背景选择器的使用, button (未点击,点击,选中保持状态)效果实现 首先看到selector的属性: android:state_focus ...

  9. myeclipse 写java代码提示 dead code 原因

    经常使用MyEclipse要么Eclipse编辑写java程序猿代码.您可能经常会遇到一个黄色警戒线:dead code:一般程序猿遇到这些问题都会置之不理,反正也不影响程序的编译运行.对,这不是bu ...

  10. Android记录6--ViewPage+Fragment的使用例子

    Android记录6--ViewPage+Fragment的使用例子 2013年9月6日Fragment学习 Fragment这个东西,我到现在才接触到,之前没有用到过,关于Fragment这个东西在 ...