javascript實現核取方塊全選和取消程式碼分析

螞蟻小編發表於2017-03-16
JavaScript

核取方塊是常用的元素之一，而點選實現全選和取消全選又是最為常用的功能，特別是在批量操作管理中，非常的方便，下面就通過程式碼例項介紹一下如何實現此效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>核取方塊的全選和取消程式碼-螞蟻部落</title> 
<script type="text/javascript">
window.onload=function(){
  var ckall=document.getElementById("control");
  var cks=document.getElementsByName("ck");
  var title=document.getElementById("title");
  ckall.onclick=function(){
    for (var i=0;i<cks.length;i++){
      if(ckall.checked==true){
        cks[i].checked=true;
        title.innerHTML="取消";
      }
      else{
        cks[i].checked=false;
        title.innerHTML="全選";
      }
    }
  }
}
</script>
</head>
<body>
<form id="form1">
  <input type="checkbox" id="control" />
  <span id="title">全選</span>
  <div id="box">
    <input type="checkbox" name="ck" />
    <input type="checkbox" name="ck" />
    <input type="checkbox" name="ck" />
    <input type="checkbox" name="ck" />
    <input type="checkbox" name="ck" />
    <input type="checkbox" name="ck" />
  </div>
</form>
</body>
</html>

以上程式碼實現了我們的要求，當點選頂部核取方塊的時候能夠全選和取消全選所有的核取方塊，下面介紹一下實現過程:

一.實現原理:

原理比較簡單，當點選頂部核取方塊的時候，此核取方塊註冊的事件處理函式可以判斷此時核取方塊是否被選中，如果被選中的話，通過for迴圈遍歷所有的核取方塊，然後將每一個核取方塊設定為選中，並且將span中的內容設定為取消，反之同樣的道理。

二.相關閱讀:

1.getElementsByName()函式可以參閱getElementsByName()一章節。

3.innerHTML屬性可以參閱js innerHTML一章節。

相關文章