js如何實現點選li選中和取消裡面的核取方塊

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

正常情況下，只有單機核取方塊本身才可以選中或者取消選中核取方塊，有時候可能需要這樣的效果，只要單機核取方塊所在的行即可選中或者取消，下面就通過程式碼例項簡單介紹一下如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul{list-style:none;}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var lis=document.getElementsByTagName("li");
  for(var i=0;i<lis.length;i++){
    lis[i].onclick=function(){
      if(this.children[0].checked==true){
        this.children[0].checked=false;
      }
      else if(this.children[0].checked==false){
        this.children[0].checked=true;
      }
    }
  }
}
</script>
</head>
<body>
<ul>
  <li><input type="checkbox" />只有努力才會有美好的明天。</li>
  <li><input type="checkbox" />沒有哪個人一開始就是高手，需要努力學習</li>
  <li><input type="checkbox" />每一天都是新的，要好好把握當前</li>
  <li><input type="checkbox" />太陽出來了，每一天都是新的</li>
</ul>
</body>
</html>

只要點選li元素就可以選中或者取消選中當前li元素中的核取方塊，下面介紹一下實現過程。

一.實現原理:

原理很簡單，就是為每一個li元素註冊click事件處理函式，當點li元素的時候，能夠通過children[0]獲取浮核取方塊，然後判斷它是否當前被選中，如果被選中，那麼就取消核取方塊選中，如果沒有被選中，則選中核取方塊。

二.相關閱讀:

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

相關文章