总结：

版本 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

为什么jquery 1.6+增加了.prop()方法，因为在有些浏览器中比如说只要写disabled，checked就可以了，而有的要写成disabled = "disabled"，checked="checked"。所以，从1.6开始，jq提供新的方法“prop”来获取这些属性。
以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。
那么，什么时候使用attr，什么时候使用prop？？
1.添加属性名称该属性就会生效应该使用prop.
2.是有true,false两个属性使用prop.
3.其他则使用attr
项目中jquery升级的时候大家要注意这点！
以下是官方建议attr(),prop()的使用：
 
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 函数区别的更多相关文章

  1. jquery中prop和attr的区别

    jquery中prop和attr的区别 prop: prop(name|properties|key,value|fn) **概述** 获取在匹配的元素集中的第一个元素的属性值. 随着一些内置属性的D ...

  2. jquery里prop和attr的区别

    本文通过具体的实例来讲述jquery里prop和attr的区别及使用方法. 在jquery里,我们要获取一个标签元素的属性,可以用attr或者prop,那么两者有什么区别呢? 其实很简单: attr可 ...

  3. jQuery获取checkbox选中项等操作及注意事项

    jQuery获取checkbox选中项等操作及注意事项 今天在做一个项目功能时需要显示checkbox选项来让用户进行选择,由于前端不是很熟练,所以做了一个简单的Demo,其中遇到一些小问题,特记录下 ...

  4. jQuery获取多种值的方法

    **jQuery 1.3.2版本下的 jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关设置** 1.判断是否已经打 ...

  5. jquery获取input值的各种情况

    jQuery获取多种input值的方法 获取input的checked值是否为true: 第一种: if($("input[name=item][value='val']").at ...

  6. jQuery的prop和attr的区别，及判断复选框是否选中

    jQuery的prop和attr的区别 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 参数有区别,att ...

  7. jquery中的prop和attr比较区别

    近期和一同事争执prop和attr的区别,也查了很多,同事说它只是特性和固有属性的区别,但是我也查到了一些其他的,故此,来总结一下吧! 1.固有属性和特别属性 对于HTML元素本身就带有的固有属性,在 ...

  8. jquery获取kindEditor值

    KE.show({            id: 'txtMessage',            imageUploadJson: '/ajax/Manager/keupload.ashx?ptyp ...

  9. js获取checkbox值的方法

    js获取checkbox值的方法.分享给大家供大家参考.具体实现方法如下:<html> <head> <meta http-equiv="Content-Typ ...

随机推荐

  1. unity优化测试插件推荐：内存分析，数据监控，弱网模拟

    1.内存分析插件,unity官方出品 官方地址:https://bitbucket.org/Unity-Technologies/memoryprofiler 我整理的:https://downloa ...

  2. Java面试题-Java容器

    一.Java容器分类 Java容器划分为两个概念Collection.Map Collection: 一个独立元素的序列,这些元素都服从一条或多条规则.List必须按照插入的顺序保存元素,不关心是否重 ...

  3. No result defined for action and result input

    今天在编程的时候,我遇到了No result defined for action and result input的错误,这个错误想必大家都有遇到过吧,我今天发了很长时间弄这个错误,我以为我的Act ...

  4. Scrum 冲刺博客第八篇

    一.当天站立式会议照片一张 二.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中 昨天已完成的工作 对界面进行美化 今天计划完成的工作 连接数据库实现排行榜的基本功能 工作中 ...

  5. [转]Format a ui-grid grid column as currency

    本文转自:https://stackoverflow.com/questions/27747184/format-a-ui-grid-grid-column-as-currency-rc-3-0 Yo ...

  6. js控制div样式显示与隐藏，JS通过点击超链接右边（指定位置）显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  7. [转] 如何应用设计模式设计你的足球引擎（一和二）----Design Football Game（Part I and II）

    原文地址: http://www.codeproject.com/KB/architecture/applyingpatterns.aspx 作者:An 'OOP' Madhusudanan 译者:赖 ...

  8. 【SSH网上商城项目实战24】Struts2中如何处理多个Model请求

       转自: https://blog.csdn.net/eson_15/article/details/51465067 1. 问题的提出 Struts2中如果实现了ModelDriven<m ...

  9. k：特殊的线性表—栈

    栈(Stack):  栈是一种特殊的线性表,栈中的数据元素以及数据元素之间的逻辑关系和线性表相同,两者之间的差别在于:线性表的插入和删除操作可以在表的任意位置进行,而栈的插入和删除操作只允许在表的尾端 ...

  10. 浏览器根对象window之窗体和工具条

    1. 窗体和工具条 1.1 窗体 frames.self.window.parent.top.opener. frames 数组类型,页面中iframe的引用,如果页面有2个iframe,则frame ...