checkbox在jquery版本1.9 以上用attr不可重复操作的问题【附解决方案】
2013-10-31 12:52
369 查看
最近做个项目,需要重复多次更改checkbox的状态,使用jquery 1.10.2的最新版本时发现,对checkbox的选中状态无法多次选中。测试代码如下:
第一次点“全选时”可以选中,再点“全不选”也正常取消选中,然后再点“全选”时发现操作没效果了。通过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()方法是一种简便的设置值得方式,特别是多属性、使用函数返回值或者一次性在多个elements中设置数值。在设置
Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the
Properties可以改变DOM元素的动态站台,不适用序列化的attribue。比如input的value属性、input和button的disabled属性,或者checkbox的checked属性。这时应该使用.prop()来替代.attr()来设置disabled和checked。.val()用于获取或者设置其value值。
<!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
valueproperty of input elements, the
disabledproperty of inputs and buttons, or the
checkedproperty 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不可重复操作的问题【附解决方案】
- checkbox在jquery版本1.9 以上用attr不可重复操作的问题
- 关于jQuery操作复选框checkbox的attr无效的问题的解决方案
- jquery1.9以上版本中判断checkbox是否选中
- jQuery中用attr和prop获取checkbox的属性问题
- 在PHP5.3以上版本运行ecshop和ecmall出现的问题及解决方案
- 关于jquery用checkbox模拟radio问题jquery对象操作无效
- JQuery操作CheckBox 第二次无法选中的问题
- 解决jquery操作checkbox全选全不选无法勾选问题
- jquery checkbox无法用attr()二次勾选问题的解决方法
- jquery checkbox勾选/取消勾选只能操作一次的诡异问题
- jQuery1.9+ 废弃的函数和方法 升级Jquery版本遇到的问题
- AjaxControlToolKit插件tabContainer在IIS7以上版本部署后自动添加visibility:hidden属性 问题的解决方案
- Jquery 获取checkbox的checked问题以及解决方案
- 关于jquery版本为1.6+使用checkbox的checked属性来判断一个checkbox是否被选中问题
- jQuery1.9+ 废弃的函数和方法 升级Jquery版本遇到的问题
- Jquery操作checkbox全选、反选失效的问题解决
- 在PHP5.3以上版本运行ecshop和ecmall出现的问题及解决方案
- jquery checkbox反复调用attr('checked', true/false)只有第一次生效 Jquery 中 $('obj').attr('checked',true)失效的几种解决方案