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 相关文章推荐
Javascript学习笔记5 类和对象
Jan 11 Javascript
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
JS简单计算器实例
Jan 20 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 Javascript
JavaScript实现一键复制内容剪贴板
Jul 23 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中Session的概念
2006/10/09 PHP
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
Yii快速入门经典教程
2015/12/28 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
Python打包可执行文件的方法详解
2016/09/19 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
生日邀请函范文
2014/01/13 职场文书
三年级数学教学反思
2014/01/31 职场文书
《三峡》教学反思
2014/03/01 职场文书
周年庆促销方案
2014/03/15 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
公司车队管理制度
2015/08/04 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis