jquery无法设置checkbox选中即没有变成选中状态


Posted in Javascript onMarch 27, 2014
$("input").attr("checked","checked")

设置以后checkbox并没有变成选中状态,用chrome调试看了一下,checkbox中确实有checked属性,而且,值为checked,但是页面显示仍然为未选中状态
$("input").prop("checked",true);

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 的值。
Javascript 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
深入理解javascript中return的作用
Dec 30 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
vue按需加载实例详解
Sep 06 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 #Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 #Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 #Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 #Javascript
js无刷新操作table的行和列
Mar 27 #Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 #Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 #Javascript
You might like
用JavaScript显示随机图像或引用
2009/04/21 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
jquery 使用简明教程
2014/03/05 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
canvas知识总结
2017/01/25 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
python根据出生日期获得年龄的方法
2015/03/31 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
Python中Numpy mat的使用详解
2019/05/24 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
postman和python mock测试过程图解
2020/02/22 Python
英国网上花店:Bunches
2016/11/29 全球购物
现金会计岗位职责
2013/12/05 职场文书
建筑班组长岗位职责
2014/01/02 职场文书
《纸船和风筝》教学反思
2014/02/15 职场文书
创先争优个人承诺书
2014/08/30 职场文书
市场总监岗位职责
2015/02/11 职场文书
校运会加油稿大全
2015/07/22 职场文书
python使用shell脚本创建kafka连接器
2022/04/29 Python