zoukankan      html  css  js  c++  java

  • JQuey中 attr('checked', true)设置状态只有第一次有用

    用prop()

    在jQuery中可以使用attr()来访问对象的属性，但是在某些时候，比如访问input的disabled属性的时候，会有些问题。在有的浏览器中，只要写了disabled属性就可以，有的则要写：disabled="disabled"。所以jquery提供了新的方法prop()来获取这些属性，使用prop()的时候，返回值是标准属性：true/false，不会回返“disabled”或者“”。那么，那些属性应该使用attr()访问，哪些应该用prop()访问呢？

    第一个原则：只添加属性名称该属性就会生效的应该使用prop()；

    第二个原则：只存在true/false的属性应该使用prop()。

    像如果是设置disabled或者checked这些属性，应该使用prop()方法，而不是使用attr()方法。

    [html] view plain copy
     
    1. <!DOCTYPE html>  
    2. <html>  
    3.     <head>  
    4.         <meta charset="UTF-8">  
    5.         <title>复选框应用</title>  
    6.         <script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>  
    7.         <style>  
    8.             .checkbox{  
    9.                 border: 1px solid #A9A9A9;  
    10.                 margin: 10px auto;  
    11.                 padding: 10px 10px;  
    12.             }  
    13.         </style>  
    14.         <script>  
    15.             $(function(){  
    16.                 //全选  
    17.                 $("#CheckedAll").click(function(){  
    18.                     //$("[name=items]:checkbox").attr('checked',true);//只有第一次生效  
    19.                     $("[name=items]:checkbox").prop('checked',true);//只有第一次生效  
    20.                 });  
    21.                 //全不选  
    22.                 $("#CheckedNo").click(function(){  
    23.                     //$("[name=items]:checkbox").attr('checked',false);//只有第一次生效  
    24.                     $("[name=items]:checkbox").prop('checked',false);  
    25.                 });  
    26.                 //反选  
    27.                 $("#CheckedRev").click(function(){  
    28.                     $("[name=items]:checkbox").each(function(){  
    29.                         this.checked=!this.checked;  
    30.                     })  
    31.                 });  
    32.                 //提交  
    33.                 $("#send").click(function(){  
    34.                     var str="你选中的是： ";  
    35.                     $("[name=items]:checked").each(function(){  
    36.                         str+=$(this).val()+" ";  
    37.                     })  
    38.                     alert(str);  
    39.                 });  
    40.                 //全选/全不选  
    41.                 $("#CheckedAN").click(function(){  
    42.                     $("[name=items]:checkbox").prop("checked",this.checked);  
    43.                 })  
    44.                 //当复选框取消某一个选项的选中状态是时，全选/全不选需要取消选中状态  
    45.                 $("[name=items]:checkbox").click(function(){  
    46.                     var tmp=$("[name=items]:checkbox");  
    47.                     $("#CheckedAN").prop("checked",tmp.length==tmp.filter(":checked").length);  
    48.                 })  
    49.             })  
    50.         </script>  
    51.     </head>  
    52.     <body>  
    53.     <form action="#" method="post" id="regForm">  
    54.         <fieldset>  
    55.             <legend>复选框应用</legend>  
    56.             <div class="checkbox">  
    57.                 你爱好的运动是？  
    58.                 <input type="checkbox" id="CheckedAN" value="全选/全不选"/>全选/全不选  
    59.                 <br />  
    60.                 <input type="checkbox" name="items" value="足球"/>足球  
    61.                 <input type="checkbox" name="items" value="篮球"/>篮球  
    62.                 <input type="checkbox" name="items" value="羽毛球" />羽毛球  
    63.                 <input type="checkbox" name="items" value="乒乓球" />乒乓球  
    64.                 <br />  
    65.                 <input type="button" id="CheckedAll" value="全选"/>  
    66.                 <input type="button" id="CheckedNo" value="全不选"/>  
    67.                 <input type="button" id="CheckedRev" value="反选" />  
    68.                 <input type="button" id="send" value="提交" />  
    69.             </div>  
    70.         </fieldset>  
    71.     </form>  
    72.     </body>  
    73. </html>  
  • 相关阅读:
    Word操作——通配符
    圆的拟合
    最优化案例整理
    机器学习数学基础知识备忘
    scikit-learn学习笔记
    Linux下安装scikit-learn
    ROS学习备忘
    [ROS]激光驱动安装
    CMake和Linux编程：find_package的使用
    [OpenCV]直线拟合
  • 原文地址：https://www.cnblogs.com/Lily-L/p/7192524.html
Copyright © 2011-2022 走看看