JavaScript核取方塊全選和全不選詳解

admin發表於2018-08-12
JavaScript

本章節分享一段程式碼例項，它實現了核取方塊的全選和全不選效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript">
function GetAllCheckBox() {
  var div = document.getElementById("Balls");
  var inputs = div.getElementsByTagName("input");
 
  var checkboxs = new Array();
  var nIndex = 0;
  for (var index = 0; index < inputs.length; index++) {
    if (inputs[index].type == "checkbox") {
      checkboxs[nIndex] = inputs[index];
      nIndex++;
    }
  }
  return checkboxs;
}
 
function selAll() {
  var checkboxs = GetAllCheckBox();
  for (var index = 0; index < checkboxs.length; index++) {
    checkboxs[index].checked = true;
  }
}
 
function clearAll() {
  var checkboxs = GetAllCheckBox();
  for (var index = 0; index < checkboxs.length; index++) {
    checkboxs[index].checked = false;
  }
}
 
function reverseAll() {
  var checkboxs = GetAllCheckBox();
  for (var index = 0; index < checkboxs.length; index++) {
    if (checkboxs[index].checked == true) {
      checkboxs[index].checked = false;
    }
    else {
      checkboxs[index].checked = true;
    }
  }
}
window.onload=function(){
  var allBt=document.getElementById("allBt");
  var clearBt=document.getElementById("clearBt");
  var negativeBt=document.getElementById("negativeBt");
   
  allBt.onclick=function(){selAll()}
  clearBt.onclick=function(){clearAll()}
  negativeBt.onclick=function(){reverseAll()}
}
</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="全選" id="allBt"/>
<input type="button" value="全清" id="clearBt"/>
<input type="button" value="反選" id="negativeBt"/>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.function GetAllCheckBox() {}，此函式能夠獲取所有的核取方塊元素。

（2）.var div = document.getElementById("Balls"),獲取id屬性值為Balls的元素物件。

（3）.var inputs = div.getElementsByTagName("input"),獲取input元素物件集合。

（4）.var checkboxs = new Array()，建立一個陣列。

（5）.var nIndex = 0，宣告一個變數並賦初值為0，作為陣列的索引。

（6）.for (var index = 0; index < inputs.length; index++) {

  if (inputs[index].type == "checkbox") {

    checkboxs[nIndex] = inputs[index];

    nIndex++;

  }

}，判斷當前input元素是否是核取方塊，如果是就將其存入陣列。

當然索引值也會遞增的。

（7）.return checkboxs，返回陣列。

（8）.function selAll() {}，選中所有的核取方塊。

（9）.var checkboxs = GetAllCheckBox()，獲取所有的核取方塊。

（10）.for (var index = 0; index < checkboxs.length; index++) {

  checkboxs[index].checked = true;

}，將所有的核取方塊設定為選中狀態。

（11）.function clearAll() {

  var checkboxs = GetAllCheckBox();

  for (var index = 0; index < checkboxs.length; index++) {

    checkboxs[index].checked = false;

  }

}將所有核取方塊設定為非選中狀態。

（12）.function reverseAll() {

  var checkboxs = GetAllCheckBox();

  for (var index = 0; index < checkboxs.length; index++) {

    if (checkboxs[index].checked == true) {

      checkboxs[index].checked = false;

    }

    else {

      checkboxs[index].checked = true;

    }

  }

}，實現了反選的效果。

如果當前選中，那麼就設定為未選中狀態。

如果當前沒有選中，那麼就設定為選中狀態。

二.相關閱讀:

（1）.getElementsByTagName()參閱document.getElementsByTagName()一章節。

（2）.for迴圈參閱JavaScript for 迴圈語句一章節。

相關文章