链接

<!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>
            // 补全代码
            var all = document.querySelector("#all");
            var options = Array.from(document.querySelectorAll(".item"));
            all.onchange = function() {
                for(let i of options) {
                    i.checked = all.checked;
                }
            }
            function updateAllbtn() {
                let r = true;
                for(let i of options) {
                    r = r&&i.checked;
                }
                if(r) {
                    all.checked = true;
                } else {
                    all.checked = false;
                }
            }
            options.forEach(i => {
                i.onchange = function() {
                    updateAllbtn();
                }
            })
            
        </script>
    </body>
</html>