JS特效 - 全选/全不选

浏览数：28 / 时间：2015年06月09日

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5 </head>
 6 <body>
 7 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
 8     </script>
 9     <script type="text/javascript">
10         $(document).ready(function () {
11 
12             $("#checkAll").click(function () {
13                 $(".checkItem").attr("checked", $(this)[0].checked);
14                 //$(this).attr("checked");
15             })
16 
17             $(".checkItem").click(function () {
18                 var objs = $(".checkItem");
19                 var isAllChecked = true; //是否是全選
20                 for (var i = 0; i < objs.length; i++) {
21                     if (!objs[i].checked) {
22                         isAllChecked = false;
23             break;
24                     }
25                 }
26              $("#checkAll").attr("checked", isAllChecked); 
27 
28             }
29             );
30 
31         });
32     </script>
33     <input type="checkbox" id="checkAll" />
34     全選
35     <div>
36         <input type="checkbox" class="checkItem" />
37         1<br />
38         <input type="checkbox" class="checkItem" />
39         2<br />
40         <input type="checkbox" class="checkItem" />
41         3<br />
42         <input type="checkbox" class="checkItem" />
43         4<br />
44     </div>
45 </body>
46 </html>