checkbox在jquery版本1.9 以上用attr不可重复操作的问题【附解决方案】
最近做个项目，需要重复多次更改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不可重复操作的问题【附解决方案】的更多相关文章
- jQuery设置checkbox全选（区别jQuery版本）
jQuery设置checkbox全选在网上有各种文章介绍,但是为什么在我们用他们的代码的时候就没有效果呢? 如果你的代码一点错误都没有,先不要急着怀疑人家代码的正确性,也许只是人家跟你用的jQuery ...
- jQuery版本引发的血案 iframe error 和 checkbox 无法勾选
问题介绍: 1.由于我们的项目里面用了很多Iframe,在初始话加载的时候页面就会报错.一开始调试很久没找到什么原因,看打印结果页面会被两次load,只能一步步找, 最后发现在document rea ...
- jQuery1.9+ 废弃的函数和方法 升级Jquery版本遇到的问题
面临问题 很久没关注JQuery了,今天突然想升级一下系统中使用的jquery版本,突然发现,升级JQuery版本到1.9之后出现了很多问题,比如:$.browser is undefined.突然就 ...
- js,onblur后下一个控件获取焦点判断、html当前活跃控件、jquery版本查看、jquery查看浏览器版本、setTimeout&setInterval
需求: input控件在失去焦点后直接做验证,验证通不过的话,显示相应错误.但是如果失去焦点后点击的下个控件是比较特殊的控件(比如,退出系统),那么不执行验证操作,直接退出系统(防止在系统退出前,还显 ...
- 在同一个页面使用多个不同的jQuery版本，让它们并存而不冲突
- jQuery自诞生以来,版本越来越多,而且jQuery官网的新版本还在不断的更新和发布中,现已经达到了1.6.4版本,但是我们在以前的项目中就已经使用了旧版本的jQuery,比如已经出现的:1.3 ...
- 在同一个页面中加载多个不同的jQuery版本
<!-- 从谷歌服务器加载jQuery最新版本--> <script type="text/javascript" src="http://ajax.g ...
- 处理jquery版本之间冲突
处理jquery版本之间冲突 前端开发们都知道jquery版本有好多,之间冲突很纠结.比如我刚来这公司的时候,后端的哥们用的是jQuery 1.3.2,我了个去,那哥们好久没更新了.我写的效果插件都是 ...
- 查看当前Jquery版本
<script type="text/javascript"> $(document).ready(function(){ alert(jQuery.fn.jquery ...
- JS/Jquery版本的俄罗斯方块(附源码分析)
转载于http://blog.csdn.net/unionline/article/details/63250597 且后续更新于此 1.前言 写这个jQuery版本的小游戏的缘由在于我想通过从零到有 ...
随机推荐
- hibernate三级缓存介绍
hibernate缓存机制:分为三种:1.一级缓存(session级别缓存,同一session中不会重复发出sql,默认会实现)2.二级缓存(跨session的缓存,不同session会从同一缓存中取 ...
- flex dispatchEvent 实例
flashbuilder sdk:3.6:jdk:1.7,:tomcat:7:myeclipse:10.0 Flex dispatchEvent实例下载:点击打开链接 Flex dispatchEve ...
- CAS分析——Core
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- 函数(Function)作用域 / 远程函数执行
函数跟变量一样也是有作用域的:Global.Script.Local.Private Global:作用于整个PowerShell会话,只要PowerShell会话不结束,被Global修饰的变量和函 ...
- Android官方技术文档翻译——ApplicationId 与 PackageName
本文译自androd官方技术文档<ApplicationId versus PackageName>,原文地址:http://tools.android.com/tech-docs/new ...
- poj 3253 Fence Repair（优先队列+哈夫曼树）
题目地址:POJ 3253 哈夫曼树的结构就是一个二叉树,每个父节点都是两个子节点的和. 这个题就是能够从子节点向根节点推. 每次选择两个最小的进行合并.将合并后的值继续加进优先队列中.直至还剩下一个 ...
- mysqldump 备份原理8
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; http://www.cnblogs.com/lyhabc/p/38 ...
- mysql-gdb--oracle
https://blogs.oracle.com/ksplice/entry/8_gdb_tricks_you_should
- 分享asp.net学习交流社区
亲们 最近发现一个很好的asp.net学习交流的QQ群——237221223.爱好asp.net的亲们可以加入到大家庭中去哈.大家在一起交流学习
- 存储过程为什么比sql效率高
对于存储过程为什么比sql效率高的原因有4点 第一就是使用存储过程允许组建式编成, 二是可以对程序进行编译,