对复选框组的全选、全不选、不全选，获取选中的复选框的值的操作
- 点击全选按钮，复选框组全部选中或者全部取消。
- 实现全选按钮和复选框组的联动，当复选框组中有一个没有被选中后，那么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的value35 ????????????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.
JQuery对checkbox的操作
原文地址：http://www.cnblogs.com/AuKing/p/7805846.html