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 disabled
property 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版本的小游戏的缘由在于我想通过从零到有 ...
随机推荐
- Git学习资料
1.http://wuyuans.com/2012/05/github-simple-tutorial/ 2.http://www.ihref.com/read-16369.html
- GoogleProgressBar
https://github.com/jpardogo/GoogleProgressBar
- 步步为营Hibernate全攻略(一)构建Hibernate框架环境
任何一项新技术的出现都有它的必然性,Hibernate也不例外,所以在掌握Hibernate的具体应用之前我们一定先要了解Hibernate是什么?使用Hibernate会给我们的程序开发带来哪些好处 ...
- MP3的频率、比特率、码率与音质的关系
想知道MP3的频率.比特率.码率与音质的关系,是不是频率越高,码率越高,音质就越好.好像MP3大多数的频率都是44100HZ的.码率有128,192等等. 这里所说的频率是採样率,一般都是44100K ...
- linux下启动某个进程
在关闭窗口的情况下,能够在后台继续运行,如 启动命令 node /home/node_modules/pixel-ping/lib/pixel-ping.js /home/node_modules/p ...
- careercup-树与图 4.7
4.7 设计并实现一个算法,找出二叉树中某两个结点的第一个共同祖先.不得将额外的结点储存在另外的数据结构中.注意:这不一定是二叉查找树. 解答 本题的关键应当是在Avoid storing addit ...
- Executing System commands in Java---ref
One of the nice features of Java language is that it provides you the opportunity to execute native ...
- Atom编辑器入门到精通(四) Atom使用进阶
在本节中将介绍Atom提供的更高级的使用技巧,通过这些技巧将会进一步提高你的代码编写效率 代码片段(Snippets) Snippets是一种在代码中快捷插入代码块的方式,下面是维基百科中对Snipp ...
- java Spring 生命周期
1.初始化回调 <bean name="userService" class="com.sun.service.UserService" init-met ...
- ImageButton 在IE 10 下的异常
最近在项目中遇到一个棘手问题,在IE10中,一些图片按钮点了毫无反应,其他浏览器(包括IE9)都正常:查看后台,发现如下异常信息: Input string was not in a correct ...