1 <!DOCTYPE html> 2 <html> 4 <head> 5 <meta charset="UTF-8"> 6 <link rel="stylesheet" href="css/style.css" /> 7 <script type="text/javascript" src="js/jquery-1.10.2.js" ></script> 8 <title>反选/反选/全不选/单选</title> 9 <style> 10 *{ 11 padding: 0; 12 margin: 0; 13 } 14 .nav{ 15 margin-top: 20px; 16 margin-left: 50px; 17 } 18 .nav>label{ 19 display: inline-block; 20 100px; 21 margin: auto 22 } 23 input{ 24 vertical-align: middle; 25 margin-right: 6px; 26 } 27 .select{ 28 margin-left: 50px; 29 margin-top: 30px; 30 } 31 </style> 32 </head> 33 <body> 34 <div class="nav"> 35 <label><input class="allcheck" type="checkbox" />全选</label> 36 <label><input class="reversecheck" type="checkbox" />反选</label> 37 <label><input class="nonecheck" type="checkbox" />全不选</label> 38 </div> 39 <ul class="select"> 40 <li><label><input class="onecheck" type="checkbox" />博客园</label></li> 41 <li><label><input class="onecheck" type="checkbox" />博客园</label></li> 42 <li><label><input class="onecheck" type="checkbox" />博客园</label></li> 43 <li><label><input class="onecheck" type="checkbox" />博客园</label></li> 44 <li><label><input class="onecheck" type="checkbox" />博客园</label></li> 45 <li><label><input class="onecheck" type="checkbox" />博客园</label></li> 46 </ul> 47 <script> 48 //全选 49 $(".allcheck").on("click",function(){ 50 var isSelect = this.checked; 51 if (isSelect) { 52 $(".reversecheck").prop("checked", false); 53 $(".nonecheck").prop("checked", false); 54 $('.onecheck').each(function () { 55 $(this).prop("checked", true) 56 }); 57 } 58 else { 59 $(".onecheck").prop("checked", false) 60 } 61 }) 62 // 反选 63 $(".reversecheck").on("click",function(){ 64 var oneSelect = $(".onecheck"); 65 var isSelect = this.checked; 66 if (isSelect) { 67 $(".allcheck").prop("checked", false); 68 for (var i = 0; i < oneSelect.length; i++) { 69 var e = oneSelect[i]; 70 e.checked = !e.checked; 71 } 72 } 73 }) 74 // 全不选 75 $(".nonecheck").on("click",function(){ 76 $(".onecheck").prop("checked", false); 77 $(".allcheck").prop("checked", ''); 78 $(".reversecheck").prop("checked", ''); 79 }) 80 // 单选 81 $(".onecheck").on("click",function(){ 82 var flag = true; 83 $(".onecheck").each(function () { 84 if (!this.checked) { 85 flag = false; 86 } 87 }) 88 if (flag) { 89 $(".allcheck").prop('checked', true); 90 $(".reversecheck").prop("checked", ''); 91 $(".nonecheck").prop("checked", ''); 92 } else { 93 $(".allcheck").prop('checked', ''); 94 } 95 }) 96 </script> 97 </body> 98 </html>