题解 | #全选#

全选

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'></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、获取元素
            var all = document.getElementById("all")
            var options = Array.from(document.getElementsByClassName("item"))
            
            // 2、实现全选按钮
            all.onchange=function(){
              options.forEach(item =>{
                item.checked=all.checked;
              })
            }

            // 3、实现其他元素
            options.forEach(item =>{ // 监听每一个复选框
              item.onchange=function(){ // 每一个复选框的改变事件
                var isPlay = true;
                options.forEach(value =>{ // 每当有一个复选框发生改变都要循环一次数组
                  if(value.checked===false) {isPlay=false; }// 如果有一个复选框的值为false那么就不是全选
                })
                all.checked=isPlay
              }
            })
            
        </script>
    </body>
</html>

全部评论
这里 全选的名字要是all,那些元素的数组名字要是options,如何还有出错就把let 改为var
点赞 回复 分享
发布于 2022-07-06 20:07

相关推荐

头像
04-17 09:29
已编辑
湖南农业大学 后端
睡姿决定发型丫:本硕末9也是0offer,简历挂了挺多,只有淘天 美团 中兴给了面试机会,淘天二面挂,美团一面kpi面,中兴一面感觉也大概率kpi(虽然国企,但一面0技术纯聊天有点离谱吧)
点赞 评论 收藏
分享
喜欢飞来飞去的雪碧在刷代码:可以试一试字节
点赞 评论 收藏
分享
评论
2
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务