jquery判断复选框选中状态以及区分attr和prop


Posted in Javascript onDecember 18, 2015

最近项目中需要用jquery判断input里checkbox是否被选中,发现用attr()获取不到复选框改变后的状态,最后查资料发现jQuery 1.6以后新增加了prop()方法,借用官方的一段描述就是:

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.
上面翻译过来大概就是:prop()处理来自节点对象自带的属性,它包含了很多原生的property;而attr()来自对象的attributes,可能是我们在元素节点上添加属性节点才会有的。当然,前面的翻译仅代表本人观点,如有错误,可以提出来~~

简单的来说就是:

对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
上面的描述也许有点模糊,引用一些大神的博客内容加上我的测试,举几个例子就知道了。

 第一个例子:元素的固有属性以及自定义属性说明

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>
 这个例子里<a>元素的DOM属性有“href、target和class",这些属性就是<a>元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在IDE里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用prop方法。

<a href="#" id="link1" action="delete">删除</a>
这个例子里<a>元素的DOM属性有“href、id和action”,很明显,前两个是固有属性,而后面一个“action”属性是我们自己自定义上去的,<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时,建议使用attr方法。使用prop方法取值和设置属性值时,都会返回undefined值。

第二个例子:prop()与attr()在表单应用上的区别

先来看一段用attr()方法代码:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title> attr() vs prop()</title>
 </head>
 <body>
  <h3>用attr()判断是否选中</h3>
  <input type="checkbox" id="input01" />我是第一个复选框A<br />
  <input type="checkbox" id="input02" checked="checked"/>我是第二个复选框B<br />
  <input type="button" id="button01" value="获取A的checked状态" />
  <input type="button" id="button02" value="获取B的checked状态" />
  <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function(){
    $("#button01").click(function(){
     var $state01=$("#input01").attr("checked");
     alert($state01);
    })
    $("#button02").click(function(){
     var $state02=$("#input02").attr("checked");
     alert($state02);
    })
   })
  </script>
 </body>
</html>

上面这段程序的测试结果是:

jquery判断复选框选中状态以及区分attr和prop

从动态图可以看出来,用attr()获取不到用户选中的状态,它只返回表单的初始值。

 再来看一段用prop()方法代码:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title> attr() vs prop()</title>
 </head>
 <body>
  <h3>用prop()判断是否选中</h3>
  <input type="checkbox" id="input01" />我是第一个复选框A<br />
  <input type="checkbox" id="input02" checked="checked"/>我是第二个复选框B<br />
  <input type="button" id="button01" value="获取A的checked状态" />
  <input type="button" id="button02" value="获取B的checked状态" />
  <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function(){
    $("#button01").click(function(){
     var $state01=$("#input01").prop("checked");
     alert($state01);
    })
    $("#button02").click(function(){
     var $state02=$("#input02").prop("checked");
     alert($state02);
    })
   })
  </script>
 </body>
</html>

上面这段程序的测试结果是:

jquery判断复选框选中状态以及区分attr和prop

从动态图可以看出来,用prop()可以实时获取用户的选中与取消操作状态。

因此我总结的差别就是:property记录的值会按照用户操作实时更新,而attribute记录的都是初始值,仅代表本人观点。

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
js 模拟气泡屏保效果代码
Jul 10 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
js判断IE浏览器版本过低示例代码
Nov 22 Javascript
javascript教程:关于if简写语句优化的方法
May 17 Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 Javascript
javascript操作符&quot;!~&quot;详解
Feb 10 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
vue中如何使用ztree
Feb 06 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 #Javascript
javascript实现保留两位小数的多种方法
Dec 18 #Javascript
原生js实现图片轮播特效
Dec 18 #Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 #Javascript
浏览器兼容性问题大汇总
Dec 17 #Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 #Javascript
js调出上下文菜单的实例
Dec 17 #Javascript
You might like
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
php cache类代码(php数据缓存类)
2010/04/15 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
php swoft框架实例用法
2020/12/22 PHP
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
vue实现评价星星功能
2020/06/30 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
Python中整数的缓存机制讲解
2019/02/16 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
Linux开机引导的步骤是什么
2015/10/19 面试题
师范应届生求职信
2013/11/15 职场文书
篝火晚会主持词
2014/03/25 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
法律讲堂观后感
2015/06/11 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
Python面向对象编程之类的概念
2021/11/01 Python