最近做个项目，需要重复多次更改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. SQL SERVER 导入EXCEL的存储过程

    1.先在查询分析器里执行 exec sp_configure "show advanced options",1 reconfigure exec sp_configure &qu ...

  2. svn2git使用小记

    Github强烈推荐使用svn2git工具将svn repository转成git repository: https://help.github.com/articles/importing-fro ...

  3. Wix#可以直接写C#代码来生成Wix的MSI安装文

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Wix#可以直接写C#代码来生成Wix的MSI安装文.

  4. IOS 获取屏幕尺寸

    CGRect frame = [[UIScreen mainScreen] bounds];    NSLog(@"frame :%@",frame); 这样输入是null NSL ...

  5. Python递归遍历目录下所有文件

    #自定义函数: import ospath="D:\\Temp_del\\a"def gci (path): """this is a stateme ...

  6. RadHat搭建内网YUM源server

    前言:随着内网linuxserver越来越多,在每台server上安装软件.都要先把安装盘上传上去.在配置本地yum服务,即麻烦又费时.能够在内网的一台linuxserver上安装yum服务,然后其它 ...

  7. 【转】Sqlserver通过链接服务器访问Oracle的那些事儿！

    原文:http://blog.sina.com.cn/s/blog_614b6f210100t80r.html 前言:1.不经历风雨,怎能见彩虹.2.充分利用BaiDu.google等搜索引擎查找资料 ...

  8. 我们应该如何去了解JavaScript引擎的工作原理 系列

    http://www.nowamagic.net/librarys/veda/detail/1579

  9. 【iOS程序启动与运转】- RunLoop个人小结

    学习iOS开发一般都是从UI开始的,从只知道从IB拖控件,到知道怎么在方法里写代码,然后会显示什么样的视图,产生什么样的事件,等等.其实程序从启动开始,一直都是按照苹果封装好的代码运行着,暴露的一些属 ...

  10. Android（java）学习笔记162：Android启动过程（转载）

    转载路径为: http://blog.jobbole.com/67931/ 1. 关于Android启动过程的问题: 当按下Android设备电源键时究竟发生了什么? Android的启动过程是怎么样 ...