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 相关文章推荐
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
使用隐藏的new来创建对象
Mar 29 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 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
Smarty分页实现方法完整实例
2016/05/11 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
JavaScript实现好看的跟随彩色气泡效果
2020/02/06 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
Python-openCV开运算实例
2020/07/05 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
中医药大学毕业生自荐信
2013/11/08 职场文书
贷款委托书范本
2014/04/08 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
单位作风建设自查报告
2014/10/23 职场文书
红色影片观后感
2015/06/18 职场文书
爱国主义主题班会
2015/08/14 职场文书