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 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>
