<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>

希望本文所述對大家的javascript程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

JavaScript實現(xiàn)帶粒子效果的進度條
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)帶粒子效果的進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-06-06
IE6-8中Date不支持toISOString的修復(fù)方法
這篇文章主要介紹了IE6-8中Date不支持toISOString的修復(fù)方法,需要的朋友可以參考下
2014-05-05
javascript實現(xiàn)table選中的行以指定顏色高亮顯示的方法
這篇文章主要介紹了javascript實現(xiàn)table選中的行以指定顏色高亮顯示的方法,實例分析了javascript操作table表格元素與相關(guān)樣式的技巧,需要的朋友可以參考下
2015-05-05
js拖拽一些常見的思路方法整理
這篇文章主要介紹了js拖拽一些常見的思路方法,需要的朋友可以參考下
2014-03-03
JavaScript中的對象和原型(一)
大家都知道在js中沒有類的概念，因此它的對象也與基于類的語言中的對象有所不同。所以大家要了解面向?qū)ο?，首先要了解js中的對象和原型，下面本文給大家介紹JavaScript中的對象和原型(一)知識，一起看下吧
2016-08-08
JS Select下拉框(支持輸入模糊查詢)
這篇文章主要為大家詳細介紹了JS Select下拉框的相關(guān)資料，支持輸入模糊查詢，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
JavaScript中的isXX系列是否繼續(xù)使用的分析
我們很容易被漂亮的代碼吸引，也不知不覺的在自己的代碼庫中加入這些。卻沒有冷靜的想過它們的優(yōu)劣。這不，我就收集了一系列形如 “是否為……？” 的判斷的boolean函數(shù)。
2011-04-04
JavaScript創(chuàng)建對象的四種常用模式實例分析
這篇文章主要介紹了JavaScript創(chuàng)建對象的四種常用模式,結(jié)合實例形式分析了javascript使用工廠模式、構(gòu)造函數(shù)模式、原型模式及動態(tài)原型模式創(chuàng)建對象的相關(guān)操作技巧與注意事項,需要的朋友可以參考下
2019-01-01
使用JavaScript實現(xiàn)一個靜態(tài)鏈表
這篇文章主要為大家詳細介紹了如何使用JavaScript實現(xiàn)一個靜態(tài)鏈表，文中的示例代碼講解詳細，具有一定的學(xué)習(xí)價值，感興趣的小伙伴可以跟隨小編一起了解一下
2023-06-06
JS實現(xiàn)的Select三級下拉菜單代碼
這篇文章主要介紹了JS實現(xiàn)的Select三級下拉菜單,涉及javascript動態(tài)創(chuàng)建下拉列表的技巧,非常具有實用價值,需要的朋友可以參考下
2015-08-08