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