在很多網站都有這樣的功能，當點擊一個全選按鈕之后，所有的復選框都會被選中，再點擊之后會取消全選，功能非常的人性化，可以省卻很多人力，下面就簡單介紹一下JS如何實現此功能，代碼實例如下:
以下是代碼：
<html><head> <meta charset=" utf-8"> <meta name="author" content="http://hovertree.com/" /> <title>JS實現復選框的全選和取消全選 - 何問起</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實現復選框的全選和取消全選 何問起</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>以上代碼實現了復選框的全選與不全選效果，下面就簡單介紹一下如何實現此功能。
一、通過下面兩個語句分別獲取要選取的復選框對象集合和要點擊的復選框對象:
var checkboxs=document.getElementsByName("myHove"+"rTreechk");var hvtck=document.getElementById("hvtck");通過以下語句獲取要選取復選框的數量:
cklen=checkboxs.length;
二、為myck對象綁定onclick事件處理函數。事件處理函數事先判斷hvtck對象是否被選中，如果被選中的話，則遍歷復選框，挨個取消選中狀態，并且通過document.getElementById("dohovertree").innerHTML="取消"將dohovertree元素中的文本設置為取消，else語句中的原理是一樣的，這里就不重復介紹了。
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
