39、（案例）全选，全不选
程序员文章站
2022-06-13 13:02:21
...
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选
<br/>
<input type="checkbox" name="love"/>篮球
<input type="checkbox" name="love"/>排球
<input type="checkbox" name="love"/>羽毛球
<input type="checkbox" name="love"/>乒乓球
<br/>
<input type="button" value="全选" onclick="selAll();"/>
<input type="button" value="全不选" onclick="selNo();"/>
<input type="button" value="反选" onclick="selOther();"/>
</body>
<script type="text/javascript">
//实现全选的操作
function selAll(){
//1.获取到要操作的复选框
var loves = document.getElementsByName("love");
//2.遍历数组，
for(var i=0;i<loves.length;i++){
var love1 = loves[i];//取到每一个input复选框
love1.checked = true;//设置属性是true
}
}
//实现全不选操作
function selNo(){
//1.获取到要操作的复选框
var loves = document.getElementsByName("love");
//2.遍历数组，
for(var i=0;i<loves.length;i++){
var love1 = loves[i];//取到每一个input复选框
love1.checked = false;//设置属性是false
}
}
//实现反选操作
function selOther(){
//1.获取到要操作的复选框
var loves = document.getElementsByName("love");
//2.遍历数组，
for(var i=0;i<loves.length;i++){
var love1 = loves[i];//取到每一个input复选框
if(love1.checked){
love1.checked = false;
}else{
love1.checked = true;
}
}
}
//实现全选和全不选
function selAllNo(){
//1.得到上面的复选框
var box1 = document.getElementById("boxid");
//2.判断这个复选框是否是选中的
if(box1.checked){
selAll();
}else{
selNo();
}
}
</script>
</html>