最近在工作中使用jquery操作checkbox,使用下面方法进行全选、反选:

var ischecked=allCheckObj.is(':checked');
ischecked?checksObj.attr('checked',true):checksObj.attr('checked',false);

调试时在ie没有问题,考虑到兼容性,试试了firefox,遇到了问题。于是乎,做了如下实验:
复选框绑定了click事件,点一次选中,再点击取消选中,依次类推。这个功能在ie中没问题,但是在firefox中测试的时候,前两次都没有问题,可以正常显示选中和取消,但当再去选中的时候,复选框的属性checkbox值变为"checked",没问题,但是复选框却不在显示选中状态,明明属性值改了,但是却不显示勾选,太诡异了。代码修改了却得不到正确的显示状态,纠结了很久,找不到原因。

原因:

ttributes和properties之间的差异在特定情况下是很重要。jQuery 1.6之前 ,.attr()方法在取某些 attribute 的值时,会返回 property 的值,这就导致了结果的不一致。从 jQuery 1.6 开始, .prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值。

例如, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected 应使用.prop()方法进行取值或赋值。 在jQuery1.6之前,这些属性使用.attr()方法取得,但是这并不是元素的attr属性。他们没有相应的属性(attributes),只有特性(property)。

例如,考虑一个DOM元素的HTML标记中定义的<input type="checkbox" checked="checked" /> ,并假设它是一个JavaScript变量命名的elem :

elem.checked true (Boolean) 将改变复选框的状态 
$(elem).prop("checked") true (Boolean) 将改变复选框的状态 
elem.getAttribute("checked") "checked" (String) 不会改变的复选框的初始状态; 
$(elem).attr("checked") (1.6) "checked" (String) 不会改变的复选框的初始状态; 
$(elem).attr("checked") (1.6.1+) "checked" (String) 将改变复选框的状态 
$(elem).attr("checked") (pre-1.6) true (Boolean) 将改变复选框的状态 
根据W3C的表单规范 ,在checked属性是一个布尔属性,这意味着只要该 attribute 存在,即使它没有值,或是一个空字符串,该属性对应的 property 就是 true。以下推荐的是兼容浏览器方式,判断 checkbox 元素的 checked 属性是否为"真" 的方法:

if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )

如果你使用jQuery 1.6 ,代码if ( $(elem).attr("checked") ),将获得一个属性(attribute) ,它不改变该复选框被选中和选中。它只是用来存储默认或选中属性的初始值。为了保持向后兼容,.attr() 方法从 jQuery 1.6.1+ 开始除了返回属性值外,还会更新 property 属性,因此 boolean attribute(布尔属性)不需要通过 .prop() 来改变其值。推荐使用上述方法之一,来取得 checked 的值。

jquery -- checkbox选中无选中状态的更多相关文章

  1. jquery checkbox radio 标签 选中的3种方法

    张映 发表于 2013-07-16 分类目录: js/jquery 标签:checkbox, jquery, radio, 选中 jquery 很灵活,checkbox radio标签选中的方法有很多 ...

  2. jquery checkbox点击选中,再点击取消选中

    if(n==1){ if($("#abs1").is(':checked')){ $("#abs1").prop("checked",fal ...

  3. jquery checkbox 复选框多次点击判断选中状态,以及全选/取消的代码示例

    2015年12月21日 10:52:51 星期一 目标, 点击当前的checbox, 判断点击后当前checkbox是否是选中状态. html: <input type="checkb ...

  4. jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox

    1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked ...

  5. jQuery通过判断 checkbox 元素的 checked 属性,判断 checkbox是否被选中

    jQuery设置复选框的属性<input type="checkbox"/> $("input").attr("checked" ...

  6. Jquery checkbox选中问题

    checkbox中有.checked的写法,判断当前是否是选中状态,不过这种是针对[object HTMLInputElement]这种类型的,而对于[object Object]这种类型是不能使用的 ...

  7. jquery--获取input checkbox是否被选中以及渲染checkbox选中状态

    jquery获取checkbox是否被选中 html <div><input type="checkbox" id="is_delete" n ...

  8. jquery判断复选框checkbox是否被选中

    jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');

  9. jquery checkbox 选中 全选 插件

    checkbox  选中 全选 在项目中经常用到,但是不同的程序员写出的东西各有差异,在此整合了jquery checkbox插件,用起来很方便,也总结了我们项目中通常会出现问题的地方,一行代码搞定. ...

随机推荐

  1. Vue 最传统的新增行,删除行,提交的数据整合

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  2. Java并发之AQS同步器学习

    AQS队列同步器学习 在学习并发的时候,我们一定会接触到 JUC 当中的工具,JUC 当中为我们准备了很多在并发中需要用到的东西,但是它们都是基于AQS(AbstractQueuedSynchroni ...

  3. Model層資料驗證

    概述 上节我们学习了Model的数据在界面之间的传递,但是很多时候,我们在数据传递的时候为了确保数据的有效性,不得不给Model的相关属性做基本的数据验证. 本节我们就学习如何使用 System.Co ...

  4. js实现拉伸拖动iframe的具体代码

    这篇文章介绍了js实现拉伸拖动iframe的具体代码,有需要的朋友可以参考一下左边iframe放树目录,右边的iframe放index页.拖鼠标同时控制2个iframe的宽高.期待有人能改进.操作方法 ...

  5. kindle paperwhite3 连不上WIFI解决方法

    确定能连接上其它的设备比如手机.如果是密码没错,路由器也正常,但是你还是连接不上,那就跟我之前遇到一样了.你先让你的kpw连接一次,不要动,再检查下你路由器连接的客户端列表(我的是在DHCP服务器一栏 ...

  6. python学习之itsdangerous模块

    类 from itsdangerous import URLSafeTimedSerializer as ustsr class ustsr(secret_key) 参数: secret_key可以是 ...

  7. ubantu下安装软件

    Linux系统中,软件通常以源代码或者预编译包的形式提供.(1)软件源代码需要编译为二进制的机器代码才能够使用,安装比较耗时,不过您可以自行调节编译选项,决定需要的功能或组件,或者针对硬件平台作一些优 ...

  8. 每日英语:China's Retirement Age Sets Experts at Odds

    The politically explosive issue of the official retirement age has drawn academics from two of China ...

  9. Oracle PLSQL Demo - 20.弱类型REF游标[没有指定查询类型,也不指定返回类型]

    declare Type ref_cur_variable IS REF cursor; cur_variable ref_cur_variable; v_ename ); v_deptno ); v ...

  10. c++之五谷杂粮4---explicit

    4.1在要求隐式转换的程序上下文中,我们可以通过将构造函数声明为explicit加以阻止. 关键字explicit只对一个实参的构造函数有效.需要多个实参的构造函数不能用于执行隐式转换,所以无需将这些 ...