原生js 写input 框，全选 -- 反选

最新推荐文章于 2023-07-12 15:38:57 发布

大浪淘沙1024

最新推荐文章于 2023-07-12 15:38:57 发布

阅读量461

点赞数

文章标签： html5 javascript html

本文链接：https://blog.csdn.net/weixin_45379180/article/details/120433622

版权

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>
<input type="checkbox">全选
<div class="box">
<input type="checkbox">1 <br>
<input type="checkbox">2 <br>
<input type="checkbox">3 <br>
<input type="checkbox">4 <br>
</div>
<script>
    
var inp = document.querySelector('input');
var inps = document.querySelector('.box').querySelectorAll('input');

inp.onclick = function() { //给全选框添加事件
    for (var i = 0; i < inps.length; i++) { //循环4个小复选框，让4个小复选框的checked状态和全选框保持一致
    inps[i].checked = this.checked;
    }
}


for (var i = 0; i < inps.length; i++) { //给下面的每一个小复选框添加点击事件
    inps[i].onclick = function() { //flag 控制全选按钮是否全部选中
        var flag = true; // 判断每个按钮是否被选中
        for (var i = 0; i < inps.length; i++) { //存在某个按钮没有被选中的情况，flag=flase;否则flag=true;
            if (!inps[i].checked) {
                flag = false;
                break;
            }
        }
        inp.checked = flag;
    }
}
</script>
</body>

</html>

大浪淘沙1024

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js 写input 框，全选 -- 反选

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title
复制链接

扫一扫