JavaScript操作checkbox复选框

2019-10-31 13:00:24 阅读：232 来源： 互联网

标签：function checkbox checked JavaScript 复选框全选 var checkboxs document

运行效果：

源代码:

 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>

标签：function,checkbox,checked,JavaScript,复选框,全选,var,checkboxs,document
来源： https://www.cnblogs.com/yijiahao/p/11770573.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript操作checkbox复选框