原生js实现的复选框的全选和全不选效果:
使用jquery实现复选框的全选和全部选效果非常的简单，这里就不介绍了，具体可以参阅jQuery实现的checkbox复选框全选和全不选效果一章节，下面介绍一下如何使用原生javascript实现此效果，代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
body{font-size:12px;}
ul{list-style:none}
</style>
<script type="text/javascript">
window.onload=function()
{
var box=document.getElementById("box");
var flag=document.getElementById("flag");
var checkAll=document.getElementById("checkAll");
checks=box.getElementsByTagName("input");
checkAll.onclick=function()
{
if(this.checked)
{
for(var i=0;i<checks.length;i++)
{
checks[i].checked=true;
}
flag.innerHTML="取消";
}
else
{
for(var i=0;i<checks.length;i++)
{
checks[i].checked=false;
}
flag.innerHTML="全选";
}
}
}
</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>
</ul>
<input type="checkbox" id="checkAll"><span id="flag">全选</span>
</body>
</html>
以上代码实现了全选和全不选效果，代码非常的简单，下面做一下简单的介绍。
一.实现原理:
当点击底部复选框的时候，代码首先会判断此复选框是否被选中，如果被选中，说明要全选，然后使用for循环遍历整个复选框，将复选框设置为选中状态，并且将span中的文本设置为取消，取消全选也是一样的道理，这里就不多介绍了。
二.相关阅读:
1.getElementsByTagName()函数可以参阅javascript的document.getElementsByTagName()一章节。
2.onclick事件可以参阅javascript的onclick事件一章节。
3.checked属性可以参阅javascript的checkbox.checked属性一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11489
更多内容可以参阅:http://www.softwhy.com/javascript/
时间： 2025-01-11 17:37:16