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 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
Oct 24 Javascript
node.js中的fs.realpath方法使用说明
Dec 16 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
vue实现图片上传预览功能
Dec 23 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
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
js读取cookie方法总结
2014/10/31 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
js保留两位小数方法总结
2018/01/31 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
python如何实现代码检查
2019/06/28 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
用友笔试题目
2016/10/25 面试题
经理管理专业自荐信范文
2013/12/31 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
python 进阶学习之python装饰器小结
2021/09/04 Python
Sql Server之数据类型详解
2022/02/28 SQL Server
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技