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

Posted Lily.L

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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/javascriptsrc="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="你选中的是:\r\n";  
  35.                     $("[name=items]:checked").each(function(){  
  36.                         str+=$(this).val()+"\r\n";  
  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>  

以上是关于JQuey中 attr('checked', true)设置状态只有第一次有用的主要内容,如果未能解决你的问题,请参考以下文章

点击checkbox后,$(this).attr('checked')得到的值不会发生改变

jquery checkbox反复调用attr('checked', true/false)只有第一次生效

jQuery中attr和prop在修改checked属性时的区别

firefox(火狐)下 js中设置checkbox属性checked="checked"已有,但复选框却不显示勾选的原因

JQuery中的.find(':checkbox').attr('checked',true);find()有遍历所有的意思吗

jquery-2.0.2 关于attr方法的问题