javascript中DOM復(fù)選框選擇用法實(shí)例
更新時(shí)間：2015年05月14日 12:34:26 作者：永遠(yuǎn)愛好寫程序
這篇文章主要介紹了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">臺(tái)球</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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 詳解JavaScript操作HTML DOM的基本方式
- JavaScript學(xué)習(xí)筆記之DOM基礎(chǔ) 2.4
- 高性能JavaScript DOM編程（1）
- javascript將DOM節(jié)點(diǎn)添加到文檔的方法實(shí)例分析
- 淺談javascript中的DOM方法
- 詳解JavaScript對(duì)W3C DOM模版的支持情況
- javascript實(shí)現(xiàn)dom動(dòng)態(tài)創(chuàng)建省市縱向列表菜單的方法
- javascript基于DOM實(shí)現(xiàn)權(quán)限選擇實(shí)例分析
- JavaScript獲取DOM元素的11種方法總結(jié)
- JavaScript DOM元素尺寸和位置
- JavaScript簡單遍歷DOM對(duì)象所有屬性的實(shí)現(xiàn)方法
相關(guān)文章
本文通過實(shí)例代碼給大家分享javascript實(shí)現(xiàn)彈出廣告功能，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-03-03
這篇文章主要介紹了JavaScript組件開發(fā)的方法,結(jié)合完整實(shí)例形式分析了組件的原理與實(shí)現(xiàn)技巧,代碼包含的詳盡的注釋,便于理解,需要的朋友可以參考下2015-12-12
自定義javascript驗(yàn)證框架示例【附源碼下載】
這篇文章主要介紹了自定義javascript驗(yàn)證框架,結(jié)合實(shí)例形式分析了javascript正則驗(yàn)證相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2019-05-05
JS實(shí)現(xiàn)一次性彈窗的方法【刷新后不彈出】
這篇文章主要介紹了JS實(shí)現(xiàn)一次性彈窗的方法,可實(shí)現(xiàn)一次性彈出,刷新后不彈出的功能,涉及JS窗口操作的相關(guān)技巧,需要的朋友可以參考下2016-12-12
JS 中可以提升幸福度的小技巧(可以識(shí)別更多另類寫法)
本文主要介紹一些JS中用到的小技巧，可以在日常Coding中提升幸福度，將不定期更新2018-07-07
JavaScript算法題之如何將一個(gè)數(shù)組旋轉(zhuǎn)k步
這篇文章主要給大家介紹了關(guān)于JavaScript算法題之如何將一個(gè)數(shù)組旋轉(zhuǎn)k步的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
動(dòng)態(tài)的創(chuàng)建一個(gè)元素createElement及刪除一個(gè)元素
本文用示例為大家介紹下動(dòng)態(tài)創(chuàng)建一個(gè)元素createElement及刪除一個(gè)元素，感興趣的朋友可以參考下2014-01-01
閉包和垃圾回收機(jī)制常常作為前端學(xué)習(xí)開發(fā)中的難點(diǎn),也經(jīng)常在面試中遇到這樣的問題,這篇文章主要介紹了JavaScript垃圾回收與閉包的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04
js獲取控件位置(坐標(biāo)位置)在不同瀏覽器中的差別，在本文為大家詳細(xì)介紹下，感興趣的朋友可以參考下2013-08-08
動(dòng)態(tài)加載js文件 document.createElement
動(dòng)態(tài)加載js文件 document.createElement...2006-10-10