jQuery 更改checkbox的状态,无效的解决方法


Posted in Javascript onJuly 22, 2016

今天写页面遇到复选框动态全选或全不选问题,正常写法如下:

$("#tb").find("input[type='checkbox']").attr("checked","checked");

but!第一次点击全选按钮input显示对勾,第二次就不行了,查了下有建议用prop的,亲测有效。那两者有啥区别呢?

jQuery函数attr()和prop()的区别:

1、操作对象不同

“attr”和“prop”分别是单词“attribute”和“property”的缩写,并且它们均表示"属性"的意思。

不过,在jQuery中,“attribute”和“property”却是两个不同的概念。attribute表示HTML文档节点的属性,property表示JS对象的属性。

<!-- 这里的id、class、data_id均是该元素文档节点的attribute -->
<div id="message" class="test" data_id="123"></div>

<script type="text/javascript">
// 这里的name、age、url均是obj的property
var obj = { name: "CodePlayer", age: 18, url: "http://www.365mini.com/" };
</script>

在jQuery中,prop()函数的设计目标是用于设置或获取指定DOM元素(指的是JS对象,Element类型)上的属性(property);attr()函数的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)。

在jQuery的底层实现中,函数attr()和prop()的功能都是通过JS原生的Element对象(如上述代码中的msg)实现的。attr()函数主要依赖的是Element对象的getAttribute()和setAttribute()两个方法。prop()函数主要依赖的则是JS中原生的对象属性获取和设置方式。

<div id="message" class="test" data_id="123"></div>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);

/* *** attr()依赖的是Element对象的element.getAttribute( attribute ) 和 element.setAttribute( attribute, value ) *** */


// 相当于 msg.setAttribute("data_id", 145);
$msg.attr("data_id", 145);

// 相当于 msg.getAttribute("data_id");
var dataId = $msg.attr("data_id"); // 145

/* *** prop()依赖的是JS原生的 element[property] 和 element[property] = value; *** */

// 相当于 msg["pid"] = "pid值";
$msg.prop("pid", "pid值");

// 相当于 msg["pid"];
var testProp = $msg.prop("pid"); // pid值
</script>

当然,jQuery对这些操作方式进行了封装,使我们操作起来更加方便(比如以对象形式同时设置多个属性),并且实现了跨浏览器兼容。

此外,虽然prop()针对的是DOM元素的property,而不是元素节点的attribute。不过DOM元素某些属性的更改也会影响到元素节点上对应的属性。例如,property的id对应attribute的id,property的className对应attribute的class

<div id="message" class="test" data_id="123"></div>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);

document.writeln( $msg.attr("class") ); // test
$msg.prop("className", "newTest");
// 修改className(property)导致class(attitude)也随之更改
document.writeln( $msg.attr("class") ); // newTest
</script>

2、应用版本不同

attr()是jQuery 1.0版本就有的函数,prop()是jQuery 1.6版本新增的函数。毫无疑问,在1.6之前,你只能使用attr()函数;1.6及以后版本,你可以根据实际需要选择对应的函数。

3、用于设置的属性值类型不同

由于attr()函数操作的是文档节点的属性,因此设置的属性值只能是字符串类型,如果不是字符串类型,也会调用其toString()方法,将其转为字符串类型。

prop()函数操作的是JS对象的属性,因此设置的属性值可以为包括数组和对象在内的任意类型。

4、其他细节问题

在jQuery 1.6之前,只有attr()函数可用,该函数不仅承担了attribute的设置和获取工作,还同时承担了property的设置和获取工作。例如:在jQuery 1.6之前,attr()也可以设置或获取tagName、className、nodeName、nodeType等DOM元素的property。

直到jQuery 1.6新增prop()函数,并用来承担property的设置或获取工作之后,attr()才只用来负责attribute的设置和获取工作。

此外,对于表单元素的“checked”、“selected”、“disabled”等属性,在jQuery 1.6之前,attr()获取这些属性的返回值为Boolean类型:如果被选中(或禁用)就返回true,否则返回false。

但是从1.6开始,使用attr()获取这些属性的返回值为String类型,如果被选中(或禁用)就返回“checked”、“selected”或“disabled”,否则(即元素节点没有该属性)返回undefined。并且,在某些版本中,这些属性值表示文档加载时的初始状态值,即使之后更改了这些元素的选中(或禁用)状态,对应的属性值也不会发生改变。

因为jQuery认为:attribute的“checked”、“selected”、“disabled”就是表示该属性初始状态的值,property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。

因此,在jQuery 1.6及以后版本中,请使用prop()函数来设置或获取checked、selected、disabled等属性。对于其它能够用prop()实现的操作,也尽量使用prop()函数。

<input id="uid" type="checkbox" checked="checked" value="1">

<script type="text/javascript">
// 当前jQuery版本为1.11.1
var uid = document.getElementById("uid");
var $uid = $(uid);

document.writeln( $uid.attr("checked") ); // checked
document.writeln( $uid.prop("checked") ); // true

// 取消复选框uid的选中(将其设为false即可)
// 相当于 uid.checked = false;
$uid.prop("checked", false);

// attr()获取的是初始状态的值,即使取消了选中,也不会改变
document.writeln( $uid.attr("checked") ); // checked
// prop()获取的值已经发生变化
document.writeln( $uid.prop("checked") ); // false
</script>

以上这篇jQuery 更改checkbox的状态,无效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 Javascript
swiper动态改变滑动内容的实现方法
Jan 17 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
Javascript字符串常用方法详解
Jul 21 #Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 #Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 #Javascript
如何用JS判断两个数字的大小
Jul 21 #Javascript
AngularJs基本特性解析(一)
Jul 21 #Javascript
jQuery表单验证插件解析(推荐)
Jul 21 #Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 #Javascript
You might like
PHP实现无限极分类图文教程
2014/11/25 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
Python生成器(Generator)详解
2015/04/13 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
Python判断两个对象相等的原理
2017/12/12 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
毕业生精彩的自我评价分享
2013/10/06 职场文书
学校食堂采购员岗位职责
2013/12/05 职场文书
单位婚育证明范本
2014/11/21 职场文书
2015年人事科工作总结
2015/04/28 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
经典爱情感言
2015/08/03 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript