jquery实现全选

jquery实现全选

利用jquery自带的循环实现
1.全选按钮主动：其他按钮的选中状态同全选按钮选中状态一样；
2.全选按钮被动：当其他按钮选中状态的数量与其他按钮的数量相同时，全选按钮选中状态，否则就是未选中状态。

 <table>
    <thead>
         <tr><td>今天中午吃什么</td></tr>
     </thead>
     <tbody>
         <tr><td><input type="checkbox">小炒肉</td>
         </tr>
         <tr><td><input type="checkbox">鸭血粉丝汤</td>
         </tr>
         <tr><td><input type="checkbox">豇豆茄子</td></tr>
         <tr><td><input type="checkbox">酸菜鱼</td>
         </tr>
     </tbody>
     <tfoot>
         <tr><td><input type="checkbox">我全要</td></tr>
     </tfoot>
 </table>
 <script>
    // 全选/全取消
     $("tfoot input[type=checkbox]").click(function(){
         $("tbody input[type=checkbox]").prop("checked",$(this).prop("checked"));
     })
     // 其他按钮
     $("tbody input[type=checkbox]").click(function(){
         if($("tbody input[type=checkbox]:checked").length===$("tbody input[type=checkbox]").length){
             $("tfoot input[type=checkbox]").prop("checked",true);
         }else{
             $("tfoot input[type=checkbox]").prop("checked",false);
         }
     })
 </script>

效果展示：