快捷導(dǎo)航

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ì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JavaScript實(shí)現(xiàn)彈出廣告功能
本文通過實(shí)例代碼給大家分享javascript實(shí)現(xiàn)彈出廣告功能，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-03-03
JavaScript組件開發(fā)完整示例
這篇文章主要介紹了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
JavaScript垃圾回收與閉包舉例詳解
閉包和垃圾回收機(jī)制常常作為前端學(xué)習(xí)開發(fā)中的難點(diǎn),也經(jīng)常在面試中遇到這樣的問題,這篇文章主要介紹了JavaScript垃圾回收與閉包的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-04-04
js獲取控件位置以及不同瀏覽器中的差別介紹
js獲取控件位置(坐標(biāo)位置)在不同瀏覽器中的差別，在本文為大家詳細(xì)介紹下，感興趣的朋友可以參考下
2013-08-08
動(dòng)態(tài)加載js文件 document.createElement
動(dòng)態(tài)加載js文件 document.createElement...
2006-10-10