jquery checkbox 勾选的bug问题解决方案与分析


Posted in Javascript onNovember 13, 2014

在做项目的时候遇到个jQuery checkbok复选框的选中取消的BUG,咨询了大神,才闹明白怎么回事,这里记录下来,分析给大家。

先上代码:

<form>

        你爱好的运动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br />

        <input type="checkbox" name="items" value="足球" />足球

        <input type="checkbox" name="items" value="篮球" />篮球

        <input type="checkbox" name="items" value="羽毛球" />羽毛球

        <input type="checkbox" name="items" value="乒乓球" />乒乓球

        <br />

        <input type="button" id="send" value="提 交" />

    </form>
 $("#CheckedAll").click(function () {

                if ($(this).is(":checked")) {

                    $("[name=items]:checkbox").attr("checked", true);

                } else {

                    $("[name=items]:checkbox").attr("checked", false);

                }

            });

第一次执行,没问题,但第二次执行就有问题了,选择不了

解决办法:把attr()换成prop()

 $("#CheckedAll").click(function () {

                if ($(this).is(":checked")) {

                    $("[name=items]:checkbox").prop("checked", true);

                } else {

                    $("[name=items]:checkbox").prop("checked", false);

                }

            });

PS:prop()和attr()区别:

最近在iteye的新闻中看到jQuery已经更新到了1.6.1。和之前版本的最大变化是增加了.prop方法。但是.prop()方法和.attr()方法,单从字面上很难区分。在汉语中properties和attributes都有表示“属性”的意思。
下面根据这篇博文(javascript:mctmp(0);),简要翻译了.prop()和.attr()的用法:

1、从1.5.2升级到1.6.1

通过介绍新方法.prop()以及.attr()方法的改变,jQuery1.6.1引起了一场关于attributes和properties之 间有何区别和联系的激烈讨论。同时,1.6.1也解决了一些向后兼容性问题。当从1.5.2升级到1.6.1时,你不必修改任何attribute代码。

下面是关于jQuery1.6和1.6.1中Attributes模块变化的描述,以及.attr()方法和.prop()方法的首选使用。然而,正如前面所述,jQuery1.6.1允许你使用.attr()方法就像以前它被使用在所有的情况中一样。

2、发生了什么变化

Attributes模块的变化是移除了attributes和properties之间模棱两可的东西,但是在jQuery社区中引起了一些混 乱,因为在1.6之前的所有版本中都使用一个方法(.attr())来处理attributes和properties。但是老的.attr()方法有一 些bug,很难维护。jQuery1.6.1对Attributes模块进行了更新,并且修复了几个bug。

特别提到的是,boolean attributes,比如:checked,selected,readonly和disabled在1.6.1中和1.6之前的处理相同。这意味着下面的代码:

$(“:checkbox”).attr(“checked”, true);  

$(“option”).attr(“selected”, true);  

$(“input”).attr(“readonly”, true);  

$(“input”).attr(“disabled”, true); 

 甚至是这样的代码:

if ( $(“:checkbox”).attr(“checked”) ) { /* Do something */ } 

在1.6.1中没有必要为了保持之前期望的运行结果而发生任何改变。

为了让jQuery1.6中的.attr()方法的变化被理解的清楚些,下面是一些使用.attr()的例子,虽然在jQuery之前的版本中能正常工作,但是现在必须使用.prop()方法代替:

jquery checkbox 勾选的bug问题解决方案与分析

首先,window或document中使用.attr()方法在jQuery1.6中不能正常运行,因为window和document中不能有 attributes。它们包含properties(比如:location或readyState),必须使用.prop()方法操作或简单地使用 javascript原生的方法。在jQuery1.6.1中,window和document中使用.attr()将被自动转成使用.prop,而不是 抛出一个错误。

其次,checked,selected和前面提到的其它boolean attributes,因为这些attributes和其相应的properties之间的特殊关系而被特殊对待。基本上,一个attribute就是以下html中你看到的:

<input type=”checkbox” checked=”checked”> 
 
boolean attributes,比如:checked,仅被设置成默认值或初始值。在一个checkbox的元素中,checked attributes在页面加载的时候就被设置,而不管checkbox元素是否被选中。

properties就是浏览器用来记录当前值的东西。正常情况下,properties反映它们相应的attributes(如果存在的话)。但 这并不是boolean attriubutes的情况。当用户点击一个checkbox元素或选中一个select元素的一个option时,boolean properties保持最新。但相应的boolean attributes是不一样的,正如上面所述,它们仅被浏览器用来保存初始值。

$(“:checkbox”).get(0).checked = true;  

// Is the same as $(":checkbox:first").prop(“checked”, true); 

在jQuery1.6中,如果使用下面的方法设置checked:
 

$(“:checkbox”).attr(“checked”, true); 

将不会检查checkbox元素,因为它是需要被设置的property,但是你所有的设置都是初始值。

然而,曾经jQuery1.6被释放出来的时候,jQuery团队明白当浏览器仅关心页面加载时,设置一些值不是特别的有用。所以,为了保持向后兼 容性和.attr()方法的有用性,我们可以继续在jQuery1.6.1中使用.attr()方法取得和设置这些boolean attributes。

最普通的attributes是checked,selected,disabled和readOnly,但下面是jQuery1.6.1支持的使用.attr()动态地取得和设置boolean attributes/properties的完整列表:

autofocus, autoplay, async, checked, controls, defer, disabled, 
hidden, loop, multiple, open, readonly, required, scoped, selected 
 
(译者注:大部分都是html5新增的属性)

还是建议使用.prop()方法来设置这些boolean attributes/properties,即使这些用例没有转换成使用.prop()方法,但是你的代码仍然可以在jQuery1.6.1中正常运行。

下面是一些attributes和properties的列表,正常情况下,应该使用其对应的方法(见下面的列表)来取得和设置它们。下面的是首用法,但是.attr()方法可以运行在所有的attributes情况下。

注意:一些DOM元素的properties也被列在下面,但是仅运行在新的.prop()方法中

jquery checkbox 勾选的bug问题解决方案与分析

*例如: window.location
**如果需要在(if needed over) .width()

.attr()和.prop()都不应该被用来取值/设值。使用.val()方法代替(即使使用.attr("value","somevalue") 可以继续运行,就像1.6之前做的那样)

3、首选用法的概述

.prop()方法应该被用来处理boolean attributes/properties以及在html(比如:window.location)中不存在的properties。其他所有的 attributes(在html中你看到的那些)可以而且应该继续使用.attr()方法来进行操作。

上面的概述已经描述的够清楚了,我也没有必要再总结了。

Javascript 相关文章推荐
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
vue实现从外部修改组件内部的变量的值
Jul 30 Javascript
Javascript 解构赋值详情
Nov 17 Javascript
Javascript window对象详解
Nov 12 #Javascript
a标签的href与onclick事件的区别详解
Nov 12 #Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 #Javascript
JavaScript实现关键字高亮功能
Nov 12 #Javascript
javascript的函数作用域
Nov 12 #Javascript
浅析javascript的间隔调用和延时调用
Nov 12 #Javascript
jQuery的deferred对象详解
Nov 12 #Javascript
You might like
笑谈配置,使用Smarty技术
2007/01/04 PHP
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
PHP编码规范之注释和文件结构说明
2010/07/09 PHP
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
remote接口和home接口主要作用
2013/05/15 面试题
年终总结会议主持词
2014/03/17 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书