javascript checkbox核取方塊全選和取消全選效果

antzone發表於2017-03-26
JavaScript

核取方塊的全選和取消全選效果在很多功能中都有應用，最為頻繁的是在後臺管理的效果中，下面就通過程式碼例項介紹一下如何利用原生的javascript實現此功能，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div,ul{
  font-size:12px;
  list-style:none;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var obox=document.getElementById("box");
  var ulcks=obox.getElementsByTagName("input");
  var ock=document.getElementById("ck");
  var oshow=document.getElementById("show");
  ock.onclick=function(){
    if(this.checked==true){
      for(var index=0;index<ulcks.length;index++){
        ulcks[index].checked=true;
      }
      oshow.innerHTML="取消";
    }
    else{
      for(var index=0;index<ulcks.length;index++){
        ulcks[index].checked=false;
      }
      oshow.innerHTML="全選";
    }
  }
}
</script> 
</head> 
<body>
<ul id="box">
  <li><input type="checkbox"/>螞蟻部落歡迎您，只有努力奮鬥才會有美好的未來。</li>
  <li><input type="checkbox"/>沒有人一開始就是高手，比如一步步的努力才行。</li>
  <li><input type="checkbox"/>每一天都是新的，要好好的真心。</li>
  <li><input type="checkbox"/>只有當下的時間才是真實的，下一秒都是虛幻的。</li>
  <li><input type="checkbox"/>分享和互助是進步的最大源動力。</li>
  <li><input type="checkbox"/>雖然道路是曲折的，但是前途也不一定是不光明的，但是希望總會有的</li>
</ul>
<div><input type="checkbox" id="ck"/><span id="show">全選</span></div>
</body>
</html>

上面的程式碼實現了此效果，下面介紹一下它的實現過程。

一.程式碼註釋:

1.window.onload=function(){}，文件內容完全載入完畢再去執行函式中的程式碼。2.var obox=document.getElementById("box")，獲取id屬性值為box的元素物件。

3.var ulcks=obox.getElementsByTagName("input")，獲取box元素下input元素集合。

4.var ock=document.getElementById("ck")，獲取id屬性值為ck的元素。

5.var oshow=document.getElementById("show")，獲取id屬性值為show的元素。

6.ock.onclick=function(){}，為ock元素註冊onclick事件處理函式。

7.if(this.checked==true){

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

    ulcks[index].checked=true;

  }

  oshow.innerHTML="取消";

}

如果核取方塊是被選中的，那麼就遍歷核取方塊集合，然後將每一個核取方塊設定為選中效果，並且將oshow中的內容設定為取消。

8.else{

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

    ulcks[index].checked=false;

  }

  oshow.innerHTML="全選";

}

上面的程式碼和註釋7的作用恰好相反，原理是一樣的。

二.相關閱讀:

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

2.checked屬性可以參閱javascript checkbox.checked一章節。

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

相關文章