js實現checkbox核取方塊的反選效果

antzone發表於2017-03-26
JS

本章節介紹一下如何實現核取方塊的反選效果，下面就通過程式碼例項介紹一下如何實現此效果。

程式碼如下:

[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");
  var obt=document.getElementById("bt");
   
  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="全選";
    }
  }
  obt.onclick=function(){
    for(var index=0;index<ulcks.length;index++){
      ulcks[index].checked?ulcks[index].checked=false:ulcks[index].checked=true;
   }
  }
}
</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>
  <input type="button" id="bt" value="反選"/>
</div>
</body>
</html>

上面的程式碼不但實現了反選效果，也實現了全選和全部取消選中效果。

關於全選和取消全選可以參閱原生javascript實現的checkbox核取方塊全選和取消全選效一章節。

反選的實現原理非常的簡單，就是為按鈕註冊onclick事件處理函式，如果核取方塊選中，就取消選中，如果沒有選中就選中。

相關文章