JavaScript CheckBox實現全選和部分選擇

本文轉載自查看原文 2019-01-31 11:35 2546 JavaScript/ js

 1 <html>
 2 <head>
 3     <script>
 4         function BatchAddToBasket() {
 5             var questionNums = '';
 6             var checkboxs = document.getElementsByName('question');
 7             for (var i = 0; i < checkboxs.length; i++) {
 8                 var isChecked = false;
 9                 if (checkboxs[i].checked) {
10                     isChecked = true;
11                     break;
12                 }
13             }
14             if (!isChecked) {
15                 alert('請至少選擇一個選項');
16                 return;
17             }
18 
19             for (var i = 0; i < checkboxs.length; i++) {
20                 if (checkboxs[i].checked) {
21                     questionNums += checkboxs[i].id;
22                     if (i < checkboxs.length - 1) 
23                     questionNums += ',';
24                 }
25             }
26             alert('選項id：' + questionNums);
27         }
28 
29         function SelectAll(obj) {
30             if (obj.checked) {
31                 var checkboxs = document.getElementsByName('question');
32                 for (var i = 0; i < checkboxs.length; i++) {
33                     checkboxs[i].checked = true;
34                 }
35             } else {
36                 var checkboxs = document.getElementsByName('question');
37                 for (var i = 0; i < checkboxs.length; i++) {
38                     checkboxs[i].checked = false;
39                 }
40             }
41         }
42     </script>
43 </head>
44 <body>
45     <div>
46         <input type="checkbox" name="checkboxAll" onclick="SelectAll(this)">
47         <button onclick="BatchAddToBasket()">加入試題籃</button>
48     </div>
49     <div>
50         <input type="checkbox" name="question" id=0>
51         <input type="checkbox" name="question" id=1>
52         <input type="checkbox" name="question" id=2>
53     </div>
54 </body>
55 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 input checkbox復選框全選與部分選中效果 vue+elementUI實現分頁表格的單選或者多選、及禁止部分選擇實現bootstrap表格的選擇框（checkbox）的全選和單選功能 bootstrap實現checkbox全選、取消全選 js實現checkbox組全選和取消全選 html checkbox 實現全選/取消全選效果在某div下實現checkbox 全選 avalon js實現checkbox全選 jquery實現checkbox的單選和全選利用checkbox自帶屬性indeterminate構建含部分選中狀態的樹狀結構