javascript中DOM復(fù)選框選擇用法實(shí)例

2024-05-06 16:20:13

字體：大中小

供稿：網(wǎng)友

這篇文章主要介紹了javascript中DOM復(fù)選框選擇用法,實(shí)例分析了javascript操作復(fù)選框?qū)崿F(xiàn)全選與反選的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了javascript中DOM復(fù)選框選擇用法。分享給大家供大家參考。具體如下：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>復(fù)選框全選全清和反選</title>

<script type="text/javascript">

//取得所有的復(fù)選框?qū)ο髷?shù)組

function GetAllCheckBox() {

var div = document.getElementById("Balls");

var inputs = div.getElementsByTagName("input");

//定義復(fù)選框數(shù)組，用來返回

var checkboxs = new Array();

var nIndex = 0;

for (var i = 0; i < inputs.length; i++) {

//通過type是否為checkbox來判斷復(fù)選框

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>