1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>全选练习</title> 6 </head> 7 <body> 8 9 <form> 10 你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选 11 12 <br/> 13 <input type="checkbox" name="items" value="足球"/>足球 14 <input type="checkbox" name="items" value="篮球"/>篮球 15 <input type="checkbox" name="items" value="羽毛球"/>羽毛球 16 <input type="checkbox" name="items" value="乒乓球"/>乒乓球 17 <br/> 18 <input type="button" id="checkedAllBtn" value="全 选"/> 19 <input type="button" id="checkedNoBtn" value="全不选"/> 20 <input type="button" id="checkedRevBtn" value="反 选"/> 21 <input type="button" id="sendBtn" value="提 交"/> 22 </form> 23 24 <script src="js/jquery-1.10.1.js"></script> 25 <script type="text/javascript"> 26 /* 27 功能说明: 28 1. 点击'全选': 选中所有爱好 29 2. 点击'全不选': 所有爱好都不勾选 30 3. 点击'反选': 改变所有爱好的勾选状态 31 4. 点击'全选/全不选': 选中所有爱好, 或者全不选中 32 5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态 33 6. 点击'提交': 提示所有勾选的爱好 34 */ 35 // 获取全选全不选的复选框 36 var $checkedAllBox = $('#checkedAllBox'); 37 // 获取所有爱好 38 var $items = $(':checkbox[name=items]'); 39 //var $items= $(':checkbox').filter('[name=items]'); 40 41 42 // 1. 点击'全选': 选中所有爱好 43 $('#checkedAllBtn').click(function () { 44 $items.prop('checked',true); 45 $checkedAllBox.prop('checked',true); 46 }); 47 48 // 2. 点击'全不选': 所有爱好都不勾选 49 $('#checkedNoBtn').click(function () { 50 $items.prop('checked',false); 51 $checkedAllBox.prop('checked',false); 52 }) 53 54 55 // 3. 点击'反选': 改变所有爱好的勾选状态 56 $('#checkedRevBtn').click(function () { 57 // 因为每个复选框当前的状态不同 所以需要单独判断每个的选中状态 不能使用隐式遍历 58 // 在each方法中 this指向当前每次拿出来的那个dom 59 $items.each(function () { 60 this.checked = !this.checked; 61 }) 62 // 如果当前选中的复选框个数和总个数相等 就应该更新全选/全不选的状态为选中 63 // 获得选中的复选框集合 64 // var checkedList = $(':checkbox[name=items]:checked'); 65 // if($items.length === checkedList.length){ 66 //// 能进这个判断 就说明选中个数和总个数相等了 说明全选中 67 // $checkedAllBox.prop('checked',true); 68 // }else{ 69 //// 到了else里边 说明不是全不选中 70 // $checkedAllBox.prop('checked',false); 71 // } 72 // $checkedAllBox.prop('checked',$items.filter(':checked').length === $items.length); 73 // 不选中的长度为0 也是全选 74 $checkedAllBox.prop('checked',$items.filter(':not(:checked)').length === 0); 75 }); 76 77 78 // 5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态 79 $items.click(function () { 80 $checkedAllBox.prop('checked',$items.filter(':not(:checked)').length === 0); 81 }); 82 83 84 // 4. 点击'全选/全不选': 选中所有爱好, 或者全不选中 85 $checkedAllBox.click(function () { 86 // 一旦点击了全选/全不选的这个按钮 它的状态就要设置给所有的爱好复选框 87 $items.prop('checked',this.checked); 88 }); 89 90 91 // 6. 点击'提交': 提示所有勾选的爱好 92 $('#sendBtn').click(function () { 93 $items.filter(':checked').each(function () { 94 alert(this.value); 95 // alert($(this).val()); 96 }) 97 }) 98 99 100 </script> 101 </body> 102 103 </html>