题解 | #全选#

全选

https://www.nowcoder.com/practice/84b89f326e3c4e96bacb63296e84623a

本地能过 但是可能不是题目所需要的,所以在线编辑器通过不了

<!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' onchange="handleAllChange(this.checked)"></li>
            <li>Java<input type='checkbox' class='item' onchange="handleItemChange()"></li>
            <li>javaScript<input type='checkbox' class='item' onchange="handleItemChange()"></li>
            <li>C++<input type='checkbox' class='item' onchange="handleItemChange()"></li>
            <li>python<input type='checkbox' class='item' onchange="handleItemChange()"></li>
            <li>.net<input type='checkbox' class='item' onchange="handleItemChange()"></li>
        </ul>

        <script>
            // 补全代码
            let itemList = Array.from(document.getElementsByClassName('item'));
            let all = document.getElementById('all');
            function handleItemChange() {
                for (let index = 0; index < itemList.length; index++) {
                    if (!itemList[index].checked) {
                        all.checked = false;
                        return;
                    }
                    all.checked = true;
                }
            }
            function handleAllChange(val) {
                if (val) {
                    for (let index = 0; index < itemList.length; index++) {
                        itemList[index].checked = true;
                    }
                } else {
                    for (let index = 0; index < itemList.length; index++) {
                        itemList[index].checked = false;
                    }
                }
            }
        </script>
    </body>
</html>

全部评论

相关推荐

点赞 收藏 评论
分享
牛客网
牛客企业服务