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>
13 <button type="button" onclick="unSelectAll()">取消全选</button>
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>
标签：function,checkbox,checked,JavaScript,复选框,全选,var,checkboxs,document 来源： https://www.cnblogs.com/yijiahao/p/11770573.html