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 相关文章推荐
基于jquery的无刷新分页技术
Jun 11 Javascript
JavaScript通过RegExp实现客户端验证处理程序
May 07 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
JS实现为表格动态添加标题的方法
Mar 31 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 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
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
javascript表单正则应用
2017/02/04 Javascript
javascript完美实现给定日期返回上月日期的方法
2017/06/15 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python数据结构之翻转链表
2017/02/25 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
python__name__原理及用法详解
2019/11/02 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
普通党员对照检查材料
2014/08/28 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
关于python中模块和重载的问题
2021/11/02 Python