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>
复制代码

 

posted @   翻白眼的哈士奇  阅读(4280)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示