JavaScript操作checkbox复选框

运行效果：

 

 源代码:

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>选项</title>
 6 </head>
 7 <body>
 8 <input id="travel" type="checkbox" value="旅游"/><label for="travel">旅游</label><br/>
 9 <input id="music" type="checkbox" value="音乐"/><label for="music">音乐</label><br/>
10 <input id="sports" type="checkbox" value="运动"/><label for="sports">运动</label><br/>
11 选中项的信息为：<p id="selectedContent"></p>
12 <button type="button" onclick="selectAll()">全选</button>&nbsp;
13 <button type="button" onclick="unSelectAll()">取消全选</button>&nbsp;
14 <button type="button" onclick="showInfo()">显示</button>
15 
16 <script type="text/javascript">
17     var checkboxs = document.getElementsByTagName('input');
18 
19     function selectAll() {//CheckBox全选
20         for (var i = 0; i < checkboxs.length; i++) {
21             checkboxs[i].checked = true;
22         }
23     }
24 
25     function unSelectAll() {//CheckBox取消全选
26         for (var i = 0; i < checkboxs.length; i++) {
27             checkboxs[i].checked = false;
28         }
29     }
30 
31     function showInfo() {//显示选中的value值
32         document.getElementById("selectedContent").innerText = null;
33         for (var i = 0; i < checkboxs.length; i++) {
34             if (checkboxs[i].checked === true) {
35                 document.getElementById("selectedContent").innerText += checkboxs[i].value + "，";
36             }
37         }
38     }
39 </script>
40 </body>
41 </html>

 

posted @ 2019-10-31 12:54  孤云jh  阅读(1248)  评论(0)  编辑  收藏  举报