爱好选择器HTML
1 <!DOCTYPE html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>Title</title> 5 <style> 6 * { 7 margin: 0; 8 padding: 0; 9 } 10 11 #tab li { 12 float: left; 13 list-style: none; 14 width: 80px; 15 height: 40px; 16 line-height: 40px; 17 cursor: pointer; 18 text-align: center; 19 } 20 21 #container { 22 position: relative; 23 } 24 25 #content1, #content2, #content3 { 26 width: 300px; 27 height: 100px; 28 padding: 30px; 29 position: absolute; 30 top: 40px; 31 left: 0; 32 } 33 34 #tab1, #content1 { 35 background-color: #ffcc00; 36 } 37 38 #tab2, #content2 { 39 background-color: #ff00cc; 40 } 41 42 #tab3, #content3 { 43 background-color: #00ccff; 44 } 45 </style> 46 </head> 47 <body> 48 <form> 49 你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选 50 51 <br/> 52 <input type="checkbox" name="items" value="足球"/>足球 53 <input type="checkbox" name="items" value="篮球"/>篮球 54 <input type="checkbox" name="items" value="羽毛球"/>羽毛球 55 <input type="checkbox" name="items" value="乒乓球"/>乒乓球 56 <br/> 57 <input type="button" id="checkedAllBtn" value="全 选"/> 58 <input type="button" id="checkedNoBtn" value="全不选"/> 59 <input type="button" id="checkedRevBtn" value="反 选"/> 60 <input type="button" id="sendBtn" value="提 交"/> 61 </form> 62 63 <script type="text/javascript" src="jquery-1.12.4.js"></script> 64 <script> 65 $(function(){ 66 /* 67 功能说明: 68 1. 点击‘全选‘: 选中所有爱好 69 2. 点击‘全不选‘: 所有爱好都不勾选 70 3. 点击‘反选‘: 改变所有爱好的勾选状态 71 4. 点击‘提交‘: 提示所有勾选的爱好 72 5. 点击‘全选/全不选‘: 选中所有爱好, 或者全不选中 73 6. 点击某个爱好时, 必要时更新‘全选/全不选‘的选中状态 74 */ 75 var $items = $(‘:checkbox[name=items]‘); 76 // 1. 点击‘全选‘: 选中所有爱好 77 $(‘#checkedAllBtn‘).click(function(){ 78 $items.each(function () { 79 $(this).prop(‘checked‘,true); 80 }) 81 $(‘#checkedAllBox‘).prop(‘checked‘,true); 82 }); 83 84 // 2. 点击‘全不选‘: 所有爱好都不勾选 85 $(‘#checkedNoBtn‘).click(function () { 86 $items.each(function () { 87 $(this).prop(‘checked‘,false); 88 }) 89 $(‘#checkedAllBox‘).prop(‘checked‘,false); 90 }); 91 92 // 3. 点击‘反选‘: 改变所有爱好的勾选状态 只有当所有item都是选中的状态时，才选中checkAllBox 93 $(‘#checkedRevBtn‘).click(function(){ 94 $items.each(function () { 95 this.checked = !this.checked; 96 }); 97 if($items.filter(‘:checked‘)){ 98 $(‘#checkedAllBox‘).prop(‘checked‘,$items.not(‘:checked‘).length === 0); 99 } 100 }) 101 // 4. 点击‘全选/全不选‘: 选中所有爱好, 或者全不选中 102 $(‘#checkedAllBox‘).click(function () { 103 $items.prop(‘checked‘,this.checked); 104 }) 105 // 5. 点击某个爱好时, 必要时更新‘全选/全不选‘的选中状态 106 $items.click(function () { 107 $(‘#checkedAllBox‘).prop(‘checked‘,$items.not(‘:checked‘).size()===0); 108 }) 109 110 // 6. 点击‘提交‘: 提示所有勾选的爱好 111 $(‘#sendBtn‘).click(function () { 112 $items.filter(‘:checked‘).each(function(){ 113 console.log($(this).val()); 114 }) 115 }) 116 }) 117 </script> 118 </body> 119 </html>
原文：https://www.cnblogs.com/ypha/p/13952272.html