checkbox操作

 小小示例:自己备份顺便粘出来共享.

引入头部文件:<script src="../js/jQuery1.7.2.js"></script>

 HTML代码:

  1 <table>

 2         <tr>
 3             <td>
 4                 <input type="checkbox" name="checkall" class="checkall" /></td>
 5             <td>用户名</td>
 6             <td>密码</td>
 7             <td>性别</td>
 8         </tr>
 9         <tr>
10             <td>
11                 <input type="checkbox" name="checkitem" class="checkitem" />
12             </td>
13             <td>张三</td>
14             <td>123</td>
15             <td>男</td>
16         </tr>
17         <tr>
18             <td>
19                 <input type="checkbox" name="checkitem" class="checkitem" />
20             </td>
21             <td>李四</td>
22             <td>123</td>
23             <td>男</td>
24         </tr>
25         <tr>
26             <td>
27                 <input type="checkbox" name="checkitem" class="checkitem" />
28             </td>
29             <td>阿朱</td>
30             <td>123</td>
31             <td>女</td>
32         </tr>
33     </table>

 

 Js代码:

 1 <script>
 2     $(function () {
 3         $('input[name="checkall"]').click(function () {//全选和反选
 4             $('input[name="checkitem"]').prop("checked", $(this).prop("checked"));
 5         });
 6         $('input[name="checkitem"]').click(function () {
 7             var $chk_all = $('input[name="checkall"]');
 8             var flag = true;
 9             var chk_val = $(this).parents('table').find('input[name="checkitem"]');
10             for (var i = 0; i < chk_val.length; i++) {
11                 if (!chk_val.eq(i).prop("checked")) {
12                     flag = false;
13                 }
14             }
15             $chk_all.prop("checked", flag);
16         });
17     });
18 </script>