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 相关文章推荐
jquery的颜色选择插件实例代码
Oct 02 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
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 array_slice函数的使用以及参数详解
2008/08/30 PHP
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
php按单词截取字符串的方法
2015/04/07 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
PHP安全下载文件的方法
2016/04/07 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
js调用flash的效果代码
2008/04/26 Javascript
JavaScript 学习点滴记录
2009/04/24 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
vue+element实现打印页面功能
2019/05/20 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
python实现挑选出来100以内的质数
2015/03/24 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
艺术设计专业个人求职信
2013/09/21 职场文书
幼师自我鉴定范文
2013/10/01 职场文书
学生生病请假条范文
2014/02/16 职场文书
工作过失检讨书
2014/02/23 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
2014年化验室工作总结
2014/11/21 职场文书