js实现全选框-全选-全不选-反选-联动选项的功能
本帖最后由 Xiexian 于 2023-6-13 09:32 编辑js实现全选框-全选-全不选-反选-联动选项的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
window.onload = function(){
let Oall = document.getElementById("all");
let Ounall = document.getElementById("unall");
let Oinvert = document.getElementById("invert");
let OA = document.getElementById("Asd");
let Obox = document.getElementById('box');
let Oinp = Obox.getElementsByTagName("input");
let i;
//全选按钮事件
Oall.onclick = function(){
for(i = 0; i<Oinp.length; i++){
Oinp.checked = true;
}
OA.checked = true;
}
//全不选按钮事件
Ounall.onclick = function(){
for(i = 0; i<Oinp.length; i++){
Oinp.checked = false;
}
OA.checked = false;
}
//全部反选按钮事件
Oinvert.onclick = function(){
for(i = 0; i<Oinp.length; i++){
Oinp.checked = !Oinp.checked;
}
let count = 0;
for(i = 0; i<Oinp.length; i++){
if(Oinp.checked){
count++;
}
}
if(count == Oinp.length){
OA.checked = true;
}else{
OA.checked = false;
}
}
//全选复选框事件
OA.onclick = function(){
for(i =0; i<Oinp.length; i++){ //如果全选被选中，则下列全部勾选
Oinp.checked = OA.checked;
}
}
// debugger;
//复选框勾选
for(i = 0; i<Oinp.length; i++){
Oinp.onclick = function(){ //这是刷新页面的原因：事件发生了
let count = 0; //用于计数，如果count==Oinp.length那么全部选中
for(i = 0; i<Oinp.length; i++){
if(Oinp.checked){
count++;
}
}
if(count == Oinp.length){
OA.checked = true;
}else{
OA.checked = false;
}
}
}
}
</script>
<input type="checkbox" id="Asd">全选
<hr>
<input type="button" value="all" id="all">
<input type="button" value="unall" id="unall">
<input type="button" value="invert" id="invert">
<hr>
<div id="box">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
</body>
</html> 反选可以取非，OA.checked = !OA.checked{:301_997:} not2die 发表于 2023-6-13 09:31
反选可以取非，OA.checked = !OA.checked
是的，我昨晚晚上改这几个，脑子昏昏的，第二天早上起床一改就成功！ 谢谢@Thanks！ 很经典的场景啊 js实现全选框-全选-全不选-反选-联动选项的功能
收藏备用:lol
页:
[1]