JavaScript CheckBox实现全选和部分选择

Posted 出门遇贵人

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript CheckBox实现全选和部分选择相关的知识,希望对你有一定的参考价值。

 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>

 

以上是关于JavaScript CheckBox实现全选和部分选择的主要内容,如果未能解决你的问题,请参考以下文章

jQuery实现checkbox的全选和反选

kndo grid:通过checkbox 实现多选和全选

vue.js实现checkbox的全选和反选

Vue实现单选、全选和反选

实现全选和取消全选

js实现checkbox的全选和全不选功能