全选

40 阅读1分钟
<!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="checked" id="all">
    <hr>
    选项1 <input type="checked" class="item">
    选项2 <input type="checked" class="item">
    选项3 <input type="checked" class="item">
    
    <script>
        const all = document.querySelector("#all")
        const items = [...document.querySelectorAll("/item")]
        all.onclick = () => {
            items.forEach(item => item.checked = all.checked)
        }
        items.forEach(child => {
            child.onclick = function () {
                all.checked = items.every(item => item.checked)
            }
        }
     </scipt>
</body>
</html>