JQuery對checkbox的操做

時間 2019-11-13

原文原文鏈接

對複選框組的全選、全不選、不全選，獲取選中的複選框的值的操做javascript

點擊全選按鈕，複選框組所有選中或者所有取消。
實現全選按鈕和複選框組的聯動，當複選框組中有一個沒有被選中後，那麼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>