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版本的小游戏的缘由在于我想通过从零到有 ...
随机推荐
- oc学习之路----APNS消息推送从证书到代码(2015年4月26号亲试可用)
前言:看这篇博客之前要准备:首先的有一个99刀的个人开发者账号或者199刀的企业开发者账号,其次你用的是apns消息推送,(本人之前四处打听有没有其他消息推送的方法:收获如下:首先如果想做到apns的 ...
- CSS- 兼容样式记录
前面加* 或者_,不是CSS的正常写法,而是利用IE的解析BUG,从而实现所需要的效果.应尽量避免使用吧.* margin-left:32px; /*所有浏览器*/*margin-left:32px; ...
- sharepoint 2013 更改搜索server组态
1.新搜索server在.安装sharepoint server 2013,并连接到一个现有的sharepoint server领域,完成后.您可以配置新的搜索server. 打开sharepoint ...
- Log4j配置具体解释
#配置Logger #--log4j.rootLogger=[level], appenderName1, appenderName2, ... #level分为: # FATAL : 0 # ERR ...
- Thread和Runnable、run和start的区别
多线程可以通过两种方式来创建: 一.通过继承Thread类. 二.通过实现Runnable接口. 那么中两种方式到底有什么区别呢?那种方式更好些呢? 先看看几个简单的Demo: Demo1 publi ...
- MySQL【第一篇】安装
一.简介 MySQL 是最流行的关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司.MySQL所使用的SQL语言是用于访问数据库的最常用标准化语言.MySQL由于其体积小. ...
- 在含有null值的复杂类的集合(Collection)中取最大值
在日常编程中,经常遇到要在一组复杂类的集合(Collection)中做比较.取最大值或最小值. 举个最简单的例子,我们要在一个如下结构的集合中选取包含最大值的元素: public class Clas ...
- HDU2001java
import java.util.*;import java.text.DecimalFormat;class Main{public static void main(String args[]){ ...
- NotificationListenerService不能监听到通知
作者:Hugo链接:https://www.zhihu.com/question/33540416/answer/113706620来源:知乎著作权归作者所有,转载请联系作者获得授权. 背景知识: 所 ...
- Android开发——避免内存泄露
本文翻译自Avoiding memory leak——Post by Romain Guy 著作权归原作者所有.转载请注明出处,由JohnTsai翻译 Android应用被分配的堆的大小限制为16MB ...