這篇文章主要介紹了javascript中DOM復選框選擇用法,實例分析了javascript操作復選框實現全選與反選的相關技巧,需要的朋友可以參考下
本文實例講述了javascript中DOM復選框選擇用法。分享給大家供大家參考。具體如下：
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>復選框全選全清和反選</title>
- <script type="text/javascript">
- //取得所有的復選框對象數組
- function GetAllCheckBox() {
- var div = document.getElementById("Balls");
- var inputs = div.getElementsByTagName("input");
- //定義復選框數組，用來返回
- var checkboxs = new Array();
- var nIndex = 0;
- for (var i = 0; i < inputs.length; i++) {
- //通過type是否為checkbox來判斷復選框
- if (inputs[i].type == "checkbox") {
- checkboxs[nIndex] = inputs[i];
- nIndex++;
- }
- }
- return checkboxs;
- }
- //全選
- function selAll() {
- var checkboxs = GetAllCheckBox();
- for (var i = 0; i < checkboxs.length; i++) {
- checkboxs[i].checked = true;
- }
- }
- //全清
- function clearAll() {
- var checkboxs = GetAllCheckBox();
- for (var i = 0; i < checkboxs.length; i++) {
- checkboxs[i].checked = false;
- }
- }
- //反選
- function reverseAll() {
- var checkboxs = GetAllCheckBox();
- for (var i = 0; i < checkboxs.length; i++) {
- if (checkboxs[i].checked == true) {
- checkboxs[i].checked = false;
- }
- else {
- checkboxs[i].checked = true;
- }
- }
- }
- </script>
- </head>
- <body>
- <div id="Balls">
- <input type="checkbox" id="c1" /><label for="c1">足球</label>
- <input type="checkbox" id="c2" /><label for="c2">臺球</label>
- <input type="checkbox" id="c3" /><label for="c3">乒乓球</label>
- <br />
- <input type="button" value="全選" onclick="selAll()" />
- <input type="button" value="全清" onclick="clearAll()" />
- <input type="button" value="反選" onclick="reverseAll()" />
- </div>
- </body>
- </html>
希望本文所述對大家的javascript程序設計有所幫助。
新聞熱點
疑難解答
圖片精選
