JS全选与取消全选代码实现
程序员文章站
2023-10-24 18:55:56
点击全选复选框，然后所有的复选框都选中，全选变成取消全选，点击取消全选复选框，然后所有的复选框都取消选中，今天我们用HTML中的JS代码实现下面是代码：
结果是:
<...
点击全选复选框，然后所有的复选框都选中，全选变成取消全选，点击取消全选复选框，然后所有的复选框都取消选中，今天我们用HTML中的JS代码实现下面是代码：
结果是:
<!DOCTYPE html>
<html>
<head>
<title>全选</title>
<script type="text/javascript">
function my(){
var is=document.getElementById('box');//获取全选的复选框
var em=is.checked;//判断复选框的选中状态
var iss=document.getElementsByName('box1');//下面所有的复选框
var ass=document.getElementById('as');
if(em){//如果全选复选框是false 则执行下面代码
for(var i=0;i<iss.length;i++){ //循环下面所有复选框,将所有复选框都选中
iss[i].checked=true;
}
ass.innerHTML='取消全选';//选中后将SPAN中的内容改为取消全选
}else{
for(var i=0;i<iss.length;i++){
iss[i].checked=false;
}
ass.innerHTML='全选';
}
}
</script>
</head>
<body>
<input type="checkbox" id="box" onclick="my()"><span id="as">全选</span>
<input type="checkbox" name="box1">学生
<input type="checkbox" name="box1">18
<input type="checkbox" name="box1">男
<input type="checkbox" name="box1">张三
</body>
</html>
下一篇： 2013年云计算有哪些期待？