JavaScript全选(全消)，动态全选全消

最新推荐文章于 2022-08-30 18:30:28 发布

最新推荐文章于 2022-08-30 18:30:28 发布 · 255 阅读

文章标签：

#JavaScript #脚本 #HTML #ViewUI

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现全选与全消复选框的方法，特别适合由数据库动态创建元素的情况。通过简单的函数即可实现全选框与各单项选择框之间的同步更新。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE>JavaScript全选(全消)，动态全选全消</TITLE> 
<script type="text/javascript" language="javascript">
function checkAll()//此方法用来全选和全消复选框
{
var items=document.getElementsByName("checkC");
var itemall=document.getElementById("all");
for(var i=0;i<items.length;i++){
items[i].checked=itemall.checked;
}
}
function resAll(){
var items=document.getElementsByName("checkC");
var itemall=document.getElementById("all");
var ite=0; //此变量用来记录当前选中的checkbox的个数
for(var i=0;i<items.length;i++){
//获得当前选中的checkbox的数量
if(items[i].checked){
ite++;
}
}
//如果当前选中的数量为有一个没有选中，并且全选框是选中状态
//则将全选框的状态变为不选择
if(ite==items.length-1&&itemall.checked){
itemall.checked=false;
}
/*---
//这个适用于你想把子选项完全去掉才将全选的效果去掉
if(ite==0&&itemall.checked){
itemall.checked=false;
}
---*/
//如果当前选中的数量为零并且全选框是未选中状态
//则将全选框的状态变为选择
if(ite==items.length&&!itemall.checked){
itemall.checked=true;
}
}
</script>
</HEAD> 
<BODY> 
此脚本适合由数据库动态创建时使用这样的，因为里面不需要传递参数。因此扩展性不是很高<br/> 
<input type="checkbox" name="all" id="all" onclick="checkAll()">全选 

<input type="checkbox" name="checkC" onclick="resAll()">1 

<input type="checkbox" name="checkC" onclick="resAll()">2 

<input type="checkbox" name="checkC" onclick="resAll()">3 

<input type="checkbox" name="checkC" onclick="resAll()">4 

<input type="checkbox" name="checkC" onclick="resAll()">5 

<input type="checkbox" name="checkC" onclick="resAll()">6 

<input type="checkbox" name="checkC" onclick="resAll()">7 

</BODY> 
</HTML> 
希望高手们不要砸我就好了！<!--v:3.2-->