input的全选反选

发布于
2018-01-31

更新于
2018-02-01

<body>
<input type="checkbox" class="all">全选
<div class="box">
    <input type="checkbox" >吃饭
    <br>
    <input type="checkbox">睡觉
    <br>
    <input type="checkbox">打豆豆
</div>
<script>
    var box=document.querySelector('.box')
    var input=box.querySelectorAll('input')
    var all=document.querySelector('.all')
    all.onclick=function () {
        for(var i=0;i<input.length;i++){
            input[i].checked=this.checked
        }
    }
    var stat
    for (var i=0;i<input.length;i++){
        input[i].onclick=function () {
            for(var j=0;j<input.length;j++){
                stat=true
                if(input[j].checked==false){
                    stat=false
                }
            }
            all.checked=stat
        }
    }
</script>
</body>

我最近在自学js，但是在操作全选反选的时候，发现这个问题，就是我感觉我这个是正确的，但是运行中，发现全选和反选都没正确执行，希望大家帮我看看，谢谢大家

javascript

阅读 3.4k

2 个回答

得票最新

supreme

2.3k12465

发布于
2018-02-01

✓ 已被采纳

        var box=document.querySelector('.box')
        var input=box.querySelectorAll('input')
        var all=document.querySelector('.all')
        all.onclick=function () {
            for(var i=0;i<input.length;i++){
                input[i].checked=this.checked
            }
        }
        for (var i=0;i<input.length;i++){
            input[i].onclick=function () {
                for(var j=0;j<input.length;j++){
                    if(input[j].checked==false){
                      all.checked=false;
                      return;
                    }
                }
                all.checked=true
            }
        }