JavaScript操作checkbox复选框
Posted 孤云jh
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于JavaScript操作checkbox复选框的主要内容，如果未能解决你的问题，请参考以下文章
实现table中checkbox复选框以及判断checked是否被选中js操作checkedbox选中