<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
        <style>
            ul {
                list-style: none;
            }
        </style>
    <body>
        <ul>
            <li>全选<input type='checkbox' id='all'></li>
            <li>Java<input type='checkbox' class='item'></li>
            <li>javaScript<input type='checkbox' class='item'></li>
            <li>C++<input type='checkbox' class='item'></li>
            <li>python<input type='checkbox' class='item'></li>
            <li>.net<input type='checkbox' class='item'></li>
        </ul>

        <script>
            // 补全代码
            /*
                1.通过通用选择器选取dom元素，然后forEach循环遍历每个结点对象
                2.一个函数两用，每个对象的checked设置为true，取反操作
                3.只能循环遍历了，每次改变一个li的状态后，如果全部都为checked，则全选按钮也会checked
                4.每次取消也是一样的思想，每次点击一个取消后直接让全选取消选中       
            */
            var all = document.querySelector("#all")
            var options = Array.from(document.querySelectorAll(".item"))
            
            // 如果全选被点击，则直接遍历lis全部设置为被选中状态，否则全部取反
            all.onchange = function() {
                options.forEach(item => item.checked = all.checked)
            }

            // 牵一发而动全身
            options.forEach(item => {
                item.onchange = function() {
                    all.checked = options.every(x => x.checked)
                }
            })
            // 大坑 变量名必须为all和options

        </script>
    </body>
</html>