js實現(xiàn)復選框的全選和取消全選效果

更新時間：2017年01月03日 17:08:46 作者：roucheng

在很多網(wǎng)站都有這樣的功能，當點擊一個全選按鈕之后，所有的復選框都會被選中，再點擊之后會取消全選，功能非常的人性化，可以省卻很多人力，本文將簡單介紹一下JS如何實現(xiàn)此功能

在很多網(wǎng)站都有這樣的功能，當點擊一個全選按鈕之后，所有的復選框都會被選中，再點擊之后會取消全選，功能非常的人性化，可以省卻很多人力，下面就簡單介紹一下JS如何實現(xiàn)此功能，代碼實例如下:

以下是代碼：

<html>
<head>
 <meta charset=" utf-8">
 <meta name="author" content="http://hovertree.com/" />
 <title>JS實現(xiàn)復選框的全選和取消全選 - 何問起</title><base target="_blank" />
 <style type="text/css">
  li {
   list-style-type: none;
   font-size: 12px;
   color: blue;
   width: 300px;
   height: 20px;
   line-height: 20px;
  }
  a {
   width: 200px;
   height: 20px;
   float: left;
  }
  .ck {
   float: left;
   width: 26px;
  }
  .time {
   color: red;
   width: 60px;
   height: 20px;
   float: right;
  }
  .dohovertree {
   font-size: 12px;
  }
 </style>
 <script type="text/javascript">
window.onload=function()
{
 var checkboxs=document.getElementsByName("myHove"+"rTreechk");
 var hvtck=document.getElementById("hvtck");
 cklen=checkboxs.length;
 hvtck.onclick=function()
 {
 if(this.checked==true)
 {
  for(var i=0;i<cklen;i++)
  {
  checkboxs[i].checked=true;
  }
  document.getElementById("dohovert"+"ree").innerHTML="取消"
 }
 else
 {
  for(var i=0;i<cklen;i++)
  {
  checkboxs[i].checked=false;
  }
  document.getElementById("dohovertree").innerHTML="全選"
 }
 }
}
 </script>
</head>
<body>
 <h3>JS實現(xiàn)復選框的全選和取消全選 何問起</h3>
 <div style="width:736px">
  <a >首頁</a> <a >更多特效</a> <a >原文</a>
 </div>
 <div>
  <ul>
   <li>
    <span class="ck"><input type="checkbox" name="myHoverTreechk" /></span>
    <a >何問起歡迎您</a>
    <span class="time">2014-12-13</span>
   </li>
   <li>
    <span class="ck"><input type="checkbox" name="myHoverTreechk" /></span>
    <a >大家好，好久不見了</a>
    <span class="time">2015-12-03</span>
   </li>
   <li>
    <span class="ck"><input type="checkbox" name="myHoverTreechk" /></span>
    <a >何問起JS</a>
    <span class="time">2015-11-13</span>
   </li>
  </ul>
  <div>
   <input type="checkbox" id="hvtck" />
   <span class="dohovertree" id="dohovertree">全選</span>
  </div>
 </div>
</body>
</html>

以上代碼實現(xiàn)了復選框的全選與不全選效果，下面就簡單介紹一下如何實現(xiàn)此功能。

一、通過下面兩個語句分別獲取要選取的復選框?qū)ο蠹虾鸵c擊的復選框?qū)ο?

var checkboxs=document.getElementsByName("myHove"+"rTreechk");
var hvtck=document.getElementById("hvtck");

通過以下語句獲取要選取復選框的數(shù)量:

cklen=checkboxs.length;

二、為myck對象綁定onclick事件處理函數(shù)。事件處理函數(shù)事先判斷hvtck對象是否被選中，如果被選中的話，則遍歷復選框，挨個取消選中狀態(tài)，并且通過document.getElementById("dohovertree").innerHTML="取消"將dohovertree元素中的文本設(shè)置為取消，else語句中的原理是一樣的，這里就不重復介紹了。

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: