checkbox在jquery版本1.9 以上用attr不可重复操作的问题【附解决方案】

   2023-02-08 学习力0
核心提示:最近做个项目,需要重复多次更改checkbox的状态,使用jquery 1.10.2的最新版本时发现,对checkbox的选中状态无法多次选中。测试代码如下: 1 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi

最近做个项目,需要重复多次更改checkbox的状态,使用jquery 1.10.2的最新版本时发现,对checkbox的选中状态无法多次选中。测试代码如下:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head runat="server">
 4     <title></title>
 5     <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8             // 全选
 9             $("#btnCheckAll").bind("click", function () {
10                 $("[name = chkItem]:checkbox").attr("checked", true);
11             });
12 
13             // 全不选
14             $("#btnCheckNone").bind("click", function () {
15                 $("[name = chkItem]:checkbox").attr("checked", false);
16             });
17 
18             // 反选
19             $("#btnCheckReverse").bind("click", function () {
20                 $("[name = chkItem]:checkbox").each(function () {
21                     $(this).attr("checked", !$(this).attr("checked"));
22                 });
23             });
24 
25             // 提交
26             $("#btnSubmit").bind("click", function () {
27                 var result = new Array();
28                 $("[name = chkItem]:checkbox").each(function () {
29                     if ($(this).is(":checked")) {
30                         result.push($(this).attr("value"));
31                     }
32                 });
33 
34                 alert(result.join(","));
35             });
36         });
37     </script>
38 </head>
39 <body>
40     <div>
41         <input name="chkItem" type="checkbox" value="今日话题" />今日话题
42         <input name="chkItem" type="checkbox" value="视觉焦点" />视觉焦点
43         <input name="chkItem" type="checkbox" value="财经" />财经
44         <input name="chkItem" type="checkbox" value="汽车" />汽车
45         <input name="chkItem" type="checkbox" value="科技" />科技
46         <input name="chkItem" type="checkbox" value="房产" />房产
47         <input name="chkItem" type="checkbox" value="旅游" />旅游
48     </div>
49     <div>
50         <input  />
51         <input  />
52         <input  />
53         <input  />
54     </div>
55 </body>
56 </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 selectedIndextagNamenodeNamenodeTypeownerDocumentdefaultChecked, 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中设置数值。在设置selectedIndextagNamenodeNamenodeTypeownerDocumentdefaultChecked, 或者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值。

 

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • 邮箱自动提示Jquery 插件-实战.失败品
    看到很多 SNS 类网站都有 邮箱注册功能. 参考了一下技术过程,触发事件为 focus keyup 和 后缀 mousedown 事件基本匹配过程就可以完成了. 所以写了下面的代码. 对  万一用户 选择错误.目前很多SNS 站都是要 手动删除后另行选择.我就写一个 focus 替换函数. 
    03-08
  • JQuery——事件绑定bind和on的区别
    引言  通过JQuery对目标对象绑定事件我们大部分都是通过$('选择器').事件名()的形式实现,其实对事件的绑定还可以使用on和bind,为了搞明白两者之间的区别特做记录,以备以后查阅。正文  bind和on都是给元素绑定事件用的,但两者在使用时有些差别,我们最
    03-08
  • jQuery select操作
    获取Select选择的Text和Value:$("#select_id").change(function(){//code...});//为Select添加事件,当选择其中一项时触发var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Textvar checkValue=$("#select_id").val(); //获
    03-08
  • jquery转盘抽奖活动代码 js大转盘抽奖代码
    jquery转盘抽奖活动代码 js大转盘抽奖代码
    jquery仿各大商城网站圆形转盘抽奖活动,淘宝商城圆形转盘抽奖活动、天猫商城圆形转盘抽奖活动、京东商城圆形转盘抽奖活动等。 查看演示
    03-08
  • jquery仿京东商城商品分类导航菜单 jquery仿京东左侧菜单导航
    jquery仿京东商城商品分类导航菜单 jquery仿京
    jquery hover事件下拉菜单导航仿京东商城商品分类导航样式布局,通过鼠标滑过商品分类导航展示商品分类子菜单内容的效果。 查看演示
    03-08
  • jQuery SuperSlide插件制作72个种常用的网页特效
    jQuery SuperSlide插件制作72个种常用的网页特
    SuperSlide2.1 超级滑动门72个扩展效果 我¥19买的,分享给大家希望大家学会感恩 “什么?20个基础效果+72个扩展效果,做到狗一 样,才19?!太不值了,大爷我给你99!” -- “多谢大爷!” 19元并不贵,就当是对广大互联网默默耕耘者的一点支持与鼓励
    03-08
  • jquery多功能弹出层插件支持Ajax、确认对话框、二次弹出层等
    jquery多功能弹出层插件支持Ajax、确认对话框、
    jquery jBox弹出层插件制作确认对话框弹出层_ajax弹出层_底部浮动弹出层等 查看演示
    03-08
  • jQuery瀑布流实例无限滚动加载图片 瀑布流式页面布局代码
    jQuery瀑布流实例无限滚动加载图片 瀑布流式页
    jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例,通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果。 查看演示!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti
    03-08
  • 17种常用的jQuery全屏焦点图代码 jq 获取焦点
    jQuery全屏焦点图特效制作带标题的焦点图切换代码 jQuery背景和banner图片一起切换全屏焦点图切换代码 jQuery仿音悦台网站全屏带标题的焦点图轮播代码 jQuery响应式焦点图插件制作响应式全屏焦点图切换代码 jquery html5响应式幻灯片插件网站响应式全屏幻
    03-08
  • 6种非常酷炫的jquery banner焦点图片幻灯片切换
    6种非常酷炫的jquery banner焦点图片幻灯片切换
    jquery sequence slide滑动幻灯片插件6款时尚的图片滑动幻灯片切换 查看演示
    03-08
点击排行