js_复选框，全选全不选

最新推荐文章于 2024-08-04 18:45:56 发布

icecoola_

最新推荐文章于 2024-08-04 18:45:56 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： javascript 复选框全选全不选

javascript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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

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

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

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

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

 
   <!DOCTYPE html 
   > 
      
  
 <html>  
     <head>  
         <meta charset="UTF-8">  
         <title>复选框应用</title>  
         <script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>  
         <style>  
             .checkbox{  
                 border: 1px solid #A9A9A9;  
                 margin: 10px auto;  
                 padding: 10px 10px;  
             }  
         </style>  
         <script>  
             $(function(){  
                 //全选  
                 $("#CheckedAll").click(function(){  
                     //$("[name=items]:checkbox").attr('checked',true);//只有第一次生效  
                     $("[name=items]:checkbox").prop('checked',true);//只有第一次生效  
                 });  
                 //全不选  
                 $("#CheckedNo").click(function(){  
                     //$("[name=items]:checkbox").attr('checked',false);//只有第一次生效  
                     $("[name=items]:checkbox").prop('checked',false);  
                 });  
                 //反选  
                 $("#CheckedRev").click(function(){  
                     $("[name=items]:checkbox").each(function(){  
                         this.checked=!this.checked;  
                     })  
                 });  
                 //提交  
                 $("#send").click(function(){  
                     var str="你选中的是：\r\n";  
                     $("[name=items]:checked").each(function(){  
                         str+=$(this).val()+"\r\n";  
                     })  
                     alert(str);  
                 });  
                 //全选/全不选  
                 $("#CheckedAN").click(function(){  
                     $("[name=items]:checkbox").prop("checked",this.checked);  
                 })  
                 //当复选框取消某一个选项的选中状态是时，全选/全不选需要取消选中状态  
                 $("[name=items]:checkbox").click(function(){  
                     var tmp=$("[name=items]:checkbox");  
                     $("#CheckedAN").prop("checked",tmp.length==tmp.filter(":checked").length);  
                 })  
             })  
         </script>  
     </head>  
     <body>  
     <form action="#" method="post" id="regForm">  
         <fieldset>  
             <legend>复选框应用</legend>  
             <div class="checkbox">  
                 你爱好的运动是？  
                 <input type="checkbox" id="CheckedAN" value="全选/全不选"/>全选/全不选  
                 <br />  
                 <input type="checkbox" name="items" value="足球"/>足球  
                 <input type="checkbox" name="items" value="篮球"/>篮球  
                 <input type="checkbox" name="items" value="羽毛球" />羽毛球  
                 <input type="checkbox" name="items" value="乒乓球" />乒乓球  
                 <br />  
                 <input type="button" id="CheckedAll" value="全选"/>  
                 <input type="button" id="CheckedNo" value="全不选"/>  
                 <input type="button" id="CheckedRev" value="反选" />  
                 <input type="button" id="send" value="提交" />  
             </div>  
         </fieldset>  
     </form>  
     </body>  
 </html>  