javascript获取选中checkbox复选框的值
分类:实例代码
关于如何使用jQuery实现此功能可以参阅jquery获取选中checkbox复选框的值一章节。
下面介绍一下如何使用原生javascript实现此功能。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> window.onload = function () { var obox = document.getElementById("box"); var oshow = document.getElementById("show"); var obt = document.getElementById("bt"); obt.onclick = function () { var cks = obox.getElementsByTagName("input"); var arr = []; for (var index = 0; index < cks.length; index++) { if (cks[index].checked) { arr.push(cks[index].value); } } oshow.innerHTML = arr; } } </script> </head> <body> <div id="box"> <input type="checkbox" value="1" /> <input type="checkbox" checked value="2" /> <input type="checkbox" checked value="3" /> <input type="checkbox" value="4" /> <input type="checkbox" value="5" /> <input type="checkbox" value="6" /> </div> <div id="show"></div> <input type="button" id="bt" value="查看效果" /> </body> </html>
上面的代码实现了我们的要求,代码非常的简单,更多内容可以参阅相关阅读。
相关阅读:
(1).getElementsByTagName()可以参阅document.getElementsByTagName()一章节。
(2).checked属性可以参阅javascript checkbox.checked一章节。
(3).push()可以参阅javascript push()一章节。
(4).innerHTML属性可以参阅innerHTML一章节。
网站出售中,有意者加微信:javadudu