如何實現復選框的全選和取消全選效果:
在很多網站都有這樣的功能，當點擊一個全選按鈕之後，所有的復選框都會被選中，再點擊之後會取消全選，功能非常的人性化，可以省卻很多人力，下面就簡單介紹一下JS如何實現此功能，代碼實例如下:
先體驗效果：http://hovertree.com/texiao/js/
以下是代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://hovertree.com/" />
<title>何問起</title>
<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;
}
.do
{
font-size:12px;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var checkboxs=document.getElementsByName("mychk");
var myck=document.getElementById("myck");
cklen=checkboxs.length;
myck.onclick=function()
{
if(this.checked==true)
{
for(var i=0;i<cklen;i++)
{
checkboxs[i].checked=true;
}
document.getElementById("do").innerHTML="取消"
}
else
{
for(var i=0;i<cklen;i++)
{
checkboxs[i].checked=false;
}
document.getElementById("do").innerHTML="全選"
}
}
}
</script>
</head>
<body>
<div>
<ul>
<li>
<span class="ck"><input type="checkbox" name="mychk"/></span>
<a href="#">何問起歡迎您</a>
<span class="time">2014-12-13</span>
</li>
<li>
<span class="ck"><input type="checkbox" name="mychk"/></span>
<a href<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>
<div>
<ul>
<li>
<span class="ck"><input type="checkbox" name="myHoverTreechk" /></span>
<a href="http://hovertree.com/">何問起歡迎您</a>
<span class="time">2014-12-13</span>
</li>
<li>
<span class="ck"><input type="checkbox" name="myHoverTreechk" /></span>
<a href="http://hovertree.com/hvtart/bjae/91eqf5ge.htm">大家好，好久不見了</a>
<span class="time">2015-12-03</span>
</li>
<li>
<span class="ck"><input type="checkbox" name="myHoverTreechk" /></span>
<a href="http://hovertree.com/menu/javascript/">何問起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語句中的原理是一樣的，這裡就不重復介紹了。