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 相关文章推荐
获取3个数组不重复的值的具体实现
Dec 30 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
深入理解React中何时使用箭头函数
Aug 23 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
uni-app微信小程序登录授权的实现
May 22 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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
PHP的autoload机制的实现解析
2012/09/15 PHP
php函数连续调用实例分析
2015/07/30 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
js闭包的用途详解
2014/11/09 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中逗号的三种作用实例分析
2015/06/08 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
python解析yaml文件过程详解
2019/08/30 Python
django框架auth模块用法实例详解
2019/12/10 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
利用python汇总统计多张Excel
2020/09/22 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
医院护士求职自荐信格式
2013/09/21 职场文书
高中生学习的自我评价
2013/12/14 职场文书
自我鉴定写作要点
2014/01/17 职场文书
关于迟到的检讨书
2014/01/26 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
酒店管理求职信
2014/06/09 职场文书
开场白怎么写
2015/06/01 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
centos8安装MongoDB的详细过程
2021/10/24 MongoDB
一文搞懂Redis中String数据类型
2022/04/03 Redis
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏