22.js全选、反选-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_55688275/article/details/140357150

方法一：

<!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>
    <input type="checkbox" id="all"> 全选
    <br />
    <input type="checkbox" name="" id="fan">反选
    <hr>

    <div><input type="checkbox" name="" id="">1</div>
    <div><input type="checkbox" name="" id="">2</div>
    <div><input type="checkbox" name="" id="">3</div>
    <div><input type="checkbox" name="" id="">4</div>
    <div><input type="checkbox" name="" id="">5</div>


    <script>
        // 使用checked查看选中状态

        var all = document.querySelector('#all')
        var fan = document.querySelector('#fan')
        var lis = document.querySelectorAll("div input")

        newlis = [...lis]
        all.onclick = function () {
            newlis.forEach(function (item) {
                item.checked = all.checked
            })
        }
        newlis.forEach(item => {
            item.onclick = function () {
                fn()
            }
        })
        function fn(){
            var res = newlis.every(item => {
                    return item.checked
                })
                if (res) {
                    all.checked = true
                } else {
                    all.checked = false
                }
        }
        // 反选
        fan.onclick = function () {
            newlis.forEach(item => {
                return item.checked = !item.checked
            })
            fn()
        }

    </script>
</body>

</html>

方法二：

<!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>
    <input type="checkbox" id="all"> 全选
    <br />
    <input type="checkbox" name="" id="fan">反选
    <hr>

    <div><input type="checkbox" name="" id="">1</div>
    <div><input type="checkbox" name="" id="">2</div>
    <div><input type="checkbox" name="" id="">3</div>
    <div><input type="checkbox" name="" id="">4</div>
    <div><input type="checkbox" name="" id="">5</div>


    <script>
        // 使用checked查看选中状态

        var all = document.querySelector('#all')
        var fan = document.querySelector('#fan')
        var lis = document.querySelectorAll("div input")

         //1. 点击全选都选 
         all.onclick=function(){
             for(var i=0;i<lis.length;i++){
                 lis[i].checked=all.checked
             }
         } 

         // 2. 一个不选  全选不选
         for (var i = 0; i < lis.length; i++) {
             lis[i].onclick = function () {
                 var count = 0
                 for (var j = 0; j < lis.length; j++) {
                     if (lis[j].checked) {
                         count++
                     }
                 }
                 if (count == lis.length) {
                     all.checked = true
                 } else {
                     all.checked = false
                 }
             }
         }
         // 3.反选
         fan.onclick=function(){
             for(var i=0;i<lis.length;i++){
                 lis[i].checked=!lis[i].checked
             }
         }

    </script>
</body>

</html>