对复选框组的全选、全不选、不全选，获取选中的复选框的值的操作
- 点击全选按钮，复选框组全部选中或者全部取消。
- 实现全选按钮和复选框组的联动，当复选框组中有一个没有被选中后，那么id=‘checkedAll’的全选按钮应该要取消选中；当复选框组全部选中后，全选按钮也应该被选中。
- 获取已选中的复选框的值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>对复选框组的全选操作</title> 6 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 /*全选 10 全选cheched和下方的checkbox按钮的checked是一致的， 11 故可用this.checked。 12 注意：$(this).checked是错的 13 */ 14 $(\'#checkedAll\').click(function() { 15 $(\'[name=item]:checkbox\').prop(\'checked\', this.checked); 16 }); 17 18 /*判断复选框的总数，是否和选中的复选框的数量相等 19 相等：全选了 20 不相等：没有全选 21 */ 22 $(\'[name=item]:checkbox\').click(function() { 23 /*得到的是ul下 name=item 的复选框数组*/ 24 var $checkedArray = $(\'[name=item]:checkbox\'); 25 /*$checkedArray.filter(\':checked\') -----> 已经选择的复选框 */ 26 $(\'#checkedAll\').prop(\'checked\',$checkedArray.length==$checkedArray.filter(\':checked\').length); 27 28 }); 29 }); 30 </script> 31 <script type="text/javascript"> 32 $(function () { 33 //获取已选的复选框的值 34 var checkedArray = new Array();//放已经选择的checkbox的value 35 var count;//已经选择的个数 36 $(\'#btn_submit\').click(function() { 37 checkedArray.length=0; 38 count=0; 39 $(\'[name=item]:checkbox:checked\').each(function() { 40 checkedArray.push($(this).val()); 41 count++; 42 }); 43 if (checkedArray.length==0) { 44 alert("Please check one at least."); 45 return; 46 } 47 confirm("已选复选框的值："+checkedArray+"\n"+"选中的复选框个数："+count); 48 }); 49 }) 50 </script> 51 </head> 52 <body> 53 <form action="#" method="POST"> 54 <input type="checkbox" id="checkedAll"><label for="checkedAll">全选</label> 55 <ul> 56 <li><input type="checkbox" name="item" value="basketball">篮球</li> 57 <li><input type="checkbox" name="item" value="football">足球</li> 58 <li><input type="checkbox" name="item" value="badminton">羽毛球</li> 59 <li><input type="checkbox" name="item" value="pingpong">兵乓球</li> 60 <li><input type="checkbox" name="item" value="swimming">游泳</li> 61 <li><input type="checkbox" name="item" value="running">跑步</li> 62 </ul> 63 <button type="button" id="btn_submit" value="提交button">提交</button> 64 </form> 65 </body> 66 </html>
对于代码中的不足，不够简洁的还可以再优化的地方，如果有什么更好的想法和实现方法，欢迎一起交流学习。
Write less, do more.