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 相关文章推荐
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
javascript简单链式调用案例分析
May 10 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
JS查找孩子节点简单示例
Jul 25 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 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
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
php实现的CSS更新类实例
2014/09/22 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
php简单获取复选框值的方法
2016/05/11 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
PHP7内核之Reference详解
2019/03/14 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
对javascript继承的理解
2016/10/11 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
Python单元测试框架unittest简明使用实例
2015/04/13 Python
python 获取等间隔的数组实例
2019/07/04 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
如何基于Python实现数字类型转换
2020/02/07 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
小孩百日宴答谢词
2014/01/15 职场文书
运动会入场式解说词
2014/02/18 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
经理岗位职责范本
2015/04/15 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
60句有关成长的名言
2019/09/04 职场文书