1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title></title>
6 <meta charset="utf-8" />
7 <link rel="stylesheet" href="style/style.css">
8 <script src="js/jquery-1.10.2.min.js"></script>
9 <script src="js/cjDome.js"></script>
10 <script src="js/dome9.js"></script>
11 <style>
12 .ck lable{
13 width:16px;
14 height:16px;
15 border:1px solid #ccc;
16 border-radius:4px;
17 display:inline-block;
18 }
19 .active{
20 background:#2A9FF6;
21 }
22 .ck input{
23 display:none;
24 }
25 </style>
26 <script>
27 $(function () {
28 $(".ck lable").click(function () {
29 if ($(this).index() == 0) {//全反选
30 if($(this).find("input").is(":checked")){
31 $(".ck").find("input").prop("checked", false);
32 $(".ck").find("lable").removeClass("active")
33 }
34 else {//全选
35 $(".ck").find("input").prop("checked", true);
36 $(".ck").find("lable").addClass("active")
37 }
38 } else {//单反选
39 if ($(this).find("input").is(":checked")) {
40 $(this).find("input").prop("checked", false);
41 $(this).removeClass("active")
42 } else {//单选
43 $(this).find("input").prop("checked", true);
44 $(this).addClass("active")
45 }
46 }
47 })
48
49 })
50 </script>
51 </head>
52 <body>
53 <div class="ck">
54 全选<lable>
55 <input type="checkbox" />
56 </lable>
57 1<lable>
58 <input type="checkbox" />
59 </lable>
60 2<lable>
61 <input type="checkbox" />
62 </lable>
63 3<lable>
64 <input type="checkbox" />
65 </lable>
66 4<lable>
67 <input type="checkbox" />
68 </lable>
69 </div>
70 </body>
71 </html>
