模块代码之checkbox全选反选的实现

实现需求：

HTML结构如下：

 1 <table>
 2     <tr>
 3         <th><input type="checkbox" name="" id="" class="all" />全选</th>
 4         <th>复选框全选示例</th>
 5     </tr>
 6     <tr>
 7         <td><input type="checkbox" name="" id="" />1</td>
 8         <td>需求：</td>
 9     </tr>
10     <tr>
11         <td><input type="checkbox" name="" id="" />2</td>
12         <td>a.单击列头复选框全选或全不选子项</td>
13     </tr>
14     <tr>
15         <td><input type="checkbox" name="" id="" />3</td>
16         <td>b.只要有一个子项没有选中，则取消列头的选中状态</td>
17     </tr>
18     <tr>
19         <td><input type="checkbox" name="" id="" />4</td>
20         <td>c.当所有子项目选中时，列头复选框自动置为选中状态</td>
21     </tr>
22     <tr>
23         <td><input type="checkbox" name="" id="" class="reverse"/>反选</td>
24         <td>d.将复选框反过来选</td>
25     </tr>
26 </table>

JS代码如下：

 1 $(‘.all‘).click(function(){
 2     if($(this).is(‘:checked‘)){
 3         $(‘input[type=checkbox]‘).not(‘.reverse‘).prop(‘checked‘,‘checked‘);
 4     }else{
 5         $(‘input[type=checkbox]‘).not(‘.reverse‘).removeProp(‘checked‘)
 6     }
 7 });
 8 $(‘.reverse‘).click(function(){
 9     var length = $(‘td input[type=checkbox]‘).not(‘.reverse‘).length;
10     $(‘td input[type=checkbox]‘).not(‘.reverse‘).each(function(){
11         if($(this).is(‘:checked‘)){
12             $(this).removeProp(‘checked‘);
13         }else{
14             $(this).prop(‘checked‘,‘checked‘);
15         }
16     });
17 });
18 $(‘td input[type=checkbox]‘).click(function(){
19     var length1 = $(‘td :checked‘).not(‘.reverse‘).length;
20     var length2 = $(‘td input[type=checkbox]‘).not(‘.reverse‘).length;
21     if(length1 != length2){
22         $(‘.all‘).removeProp(‘checked‘);
23     }else {
24         $(‘.all‘).prop(‘checked‘,‘checked‘);
25     }
26 });