zoukankan      html  css  js  c++  java
  • 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

    为什么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"。截然不同

  • 相关阅读:
    C语言拯救计划Day4-2之输出数组元素
    C语言拯救计划Day4-1之查找整数
    团队作业4——项目冲刺之日志集合贴
    团队作业6:复审与事后分析
    Alpha阶段项目复审
    事后诸葛亮分析
    团队作业5——测试与发布(Alpha版本)
    第7篇 Scrum 冲刺博客
    第6篇 Scrum 冲刺博客
    第5篇 Scrum 冲刺博客
  • 原文地址:https://www.cnblogs.com/68681395/p/3181165.html
Copyright © 2011-2022 走看看