<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全选反选</title>
</head>
<body>
<button class="truebut" id="truebut">
全选<input type="checkbox" name="cheboxs" id="trueche">
</button>
<button class="falsebut" id="falsebut">
反选<input type="checkbox" name="cheboxs" id="falseche">
</button>
<section class="ches" id="ches">
<input type="checkbox" name="book" id="book">看书
<input type="checkbox" name="ball" id="ball">打篮球
</section>
</body>
</html>
<script>
//获取全选按钮
let truebut= document.getElementById('truebut')
//获取全选选择框
let trueche=document.getElementById('trueche')
//获取反选按钮
let flasebut=document.getElementById('falsebut')
//获取反选选择框
let falseche=document.getElementById('falseche')
//获取选择框的外盒子
let ches=document.getElementById('ches')
//获取外盒子里面的input标签
let chebox=ches.getElementsByTagName('input')
//如果点击全选按钮
truebut.οnclick=function(){
//全选输入框赋值取相反值
trueche.checked!=trueche.checked
//循环获取多选框
for(let i=0;i<chebox.length;i++){
//全选框状态赋值给所以的全选
chebox[i].checked=trueche.checked;
}
//反选为假
falseche.checked=false;
}
//点击反选按钮
flasebut.οnclick=function(){
//反选按钮状态取相反值
falseche.checked!=falseche.checked;
//循环获取复选框
for(let i=0;i<chebox.length;i++){
//如果选择框为选中状态
if(chebox[i].checked==true){
//状态为假
chebox[i].checked=false
}else{
//状态为真
chebox[i].checked=true
}
}
//全选框为假
trueche.checked=false;
}
</script>
1030
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
