Jquery 获取Checkbox值，prop 和 attr 函数区别
总结：
| 版本 | 1.6 | 1.6 | 1.4 | 1.4 |
| 函数 | 勾选 | 取消勾选 | 勾选 | 取消勾选 |
attr('checked')
|
checked | undefined | true | false |
.prop('checked')
|
true | false | 1.6才有此方法 | |
.is(':checked')
|
true | false | true | false |
elem.checked
true (Boolean) Will change with checkbox state
$(elem).prop("checked")
true (Boolean) Will change with checkbox state
elem.getAttribute("checked")
"checked" (String) Initial state of the checkbox; does not change
$(elem).attr("checked")(1.6)
"checked" (String) Initial state of the checkbox; does not change
$(elem).attr("checked")(1.6.1+)
"checked" (String) Will change with checkbox state
$(elem).attr("checked")(pre-1.6)
true (Boolean) Changed with checkbox state
今天在用JQuery的时候发现一个问题用.attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined.
解决这个文章我参考了这个帖子：
http://bugs.jquery.com/ticket/9812
| Attribute/Property | .attr() |
.prop() |
|---|---|---|
| accesskey | √ | |
| align | √ | |
| async | √ | √ |
| autofocus | √ | √ |
| checked | √ | √ |
| class | √ | |
| contenteditable | √ | |
| draggable | √ | |
| href | √ | |
| id | √ | |
| label | √ | |
| location ( i.e. window.location ) | √ | √ |
| multiple | √ | √ |
| readOnly | √ | √ |
| rel | √ | |
| selected | √ | √ |
| src | √ | |
| tabindex | √ | |
| title | √ | |
| type | √ | |
width ( if needed over .width() ) |
√ |
下文来自www.jquery.com 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 For example, selectedIndex, tagName, nodeName, nodeType,ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.
elem.checked
true (Boolean) Will change with checkbox state
$(elem).prop("checked")
true (Boolean) Will change with checkbox state
elem.getAttribute("checked")
"checked" (String) Initial state of the checkbox; does not change
$(elem).attr("checked")(1.6)
"checked" (String) Initial state of the checkbox; does not change
$(elem).attr("checked")(1.6.1+)
"checked" (String) Will change with checkbox state
$(elem).attr("checked")(pre-1.6)
true (Boolean) Changed with checkbox state
原文:http://www.cnblogs.com/-run/archive/2011/11/16/2251569.html
1.6版情况：
//勾选后输出：
//attr('checked'): checked
//.prop('checked'): true
//.is(':checked'): true //取消勾选输出： //.attr('checked'): undefined
//.prop('checked'): false
//.is(':checked'): false
jquery1.4 版本：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 p { margin: 20px 0 0 }
6 b { color: blue; }
7 </style>
8 <script src="../js/jquery-1.4.4.js"></script>
9 </head>
10 <body>
11
12 <input id="check1" type="checkbox" checked="checked">
13 <label for="check1">Check me</label>
14 <p></p>
15
16 <script>
17 $("input").change(function() {
18 var $input = $(this);
19 $("p").html(".attr('checked'): <b>" + $input.attr('checked') + "</b><br>"
20 + ".is(':checked'): <b>" + $input.is(':checked') ) + "</b>";
21 }).change();
22 </script>
23
24 </body>
25 </html>
勾选后输出：
//attr('checked'): true
//.prop('checked') 1.6后版本才有这个方法
//.is(':checked'): true 取消勾选输出： //.attr('checked'): false
//.prop('checked')1.6后版本才有这个方法
//.is(':checked'): false
结论： attr('checked'): 在1.6后版本，所获取的值是 "checked"/"underfined" ，之前所获得的值是"false"/"true"。截然不同
Jquery 获取Checkbox值，prop 和 attr 函数区别的更多相关文章
- jquery中prop和attr的区别
jquery中prop和attr的区别 prop: prop(name|properties|key,value|fn) **概述** 获取在匹配的元素集中的第一个元素的属性值. 随着一些内置属性的D ...
- jquery里prop和attr的区别
本文通过具体的实例来讲述jquery里prop和attr的区别及使用方法. 在jquery里,我们要获取一个标签元素的属性,可以用attr或者prop,那么两者有什么区别呢? 其实很简单: attr可 ...
- jQuery获取checkbox选中项等操作及注意事项
jQuery获取checkbox选中项等操作及注意事项 今天在做一个项目功能时需要显示checkbox选项来让用户进行选择,由于前端不是很熟练,所以做了一个简单的Demo,其中遇到一些小问题,特记录下 ...
- jQuery获取多种值的方法
**jQuery 1.3.2版本下的 jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关设置** 1.判断是否已经打 ...
- jquery获取input值的各种情况
jQuery获取多种input值的方法 获取input的checked值是否为true: 第一种: if($("input[name=item][value='val']").at ...
- jQuery的prop和attr的区别，及判断复选框是否选中
jQuery的prop和attr的区别 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 参数有区别,att ...
- jquery中的prop和attr比较区别
近期和一同事争执prop和attr的区别,也查了很多,同事说它只是特性和固有属性的区别,但是我也查到了一些其他的,故此,来总结一下吧! 1.固有属性和特别属性 对于HTML元素本身就带有的固有属性,在 ...
- jquery获取kindEditor值
KE.show({ id: 'txtMessage', imageUploadJson: '/ajax/Manager/keupload.ashx?ptyp ...
- js获取checkbox值的方法
js获取checkbox值的方法.分享给大家供大家参考.具体实现方法如下:<html> <head> <meta http-equiv="Content-Typ ...
随机推荐
- 剑指offer（41-45）编程题
41.入一个递增排序的数组和一个数字S,在数组中查找两个数,是的他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. class Solution { public: vector&l ...
- 剑指offer(26-30)编程题
二叉搜索树与双向链表 字符串的排列 数组中出现次数超过一半的数字 最小的K个数 连续子数组的最大和 26.输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整 ...
- centos下对文件某些特定字符串分组统计出现次数
假如现有数据: { "@timestamp": "2018-10-13T21:55:58+08:00", "remote_addr": &q ...
- ListView和Adapter
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...
- JS中的Map与Set
Map Map是一组键值对的结构,具有极快的查找速度. 举个例子,假设要根据同学的名字查找对应的成绩,如果用Array实现,需要两个Array: var names = ['Michael', 'Bo ...
- 奇葩！把类型转成object
事情是这样的,客户做代码审核,要求把参数类型转换成方法传入需要的类型.额,有点绕,简单来说就是 Create(UIElement e)这个方法要在调用的时候穿进去的参数转换成UIElement,哦对了 ...
- 出现<authentication mode="Windows"/>错误解决办法
转自:https://blog.csdn.net/clever101/article/details/39671715 网上下载的asp.net源码出现 <authentication mode ...
- Docker学习（一）: 基本概念
特别声明: 博文主要是学习过程中的知识整理,以便之后的查阅回顾.部分内容来源于网络(如有摘录未标注请指出).内容如有差错,也欢迎指正! =============系列文章============= 1 ...
- 访问Django项目出现DisallowedHost at / Invalid HTTP_HOST header问题
闲来无事,想玩玩django,源码安装碰到了一堆乱七八糟依赖性问题,耗费一下午的时间总算是在ubuntu14.04上搭建好了python3+django2开发环境, 心血来潮,创建了一个django项 ...
- CentOS6.5下连网以及输入法下载
宽带拨号连网: 1.系统--首选项--网络连接(或点击桌面右上角连网图标--VPN连接--VPN配置) 2.添加--选择DSL--勾自动连接(也可不勾)--DSL下填写用户名.密码--应用 ...