【前端】全选框清单（html +js）

阡小年

已于 2022-08-08 17:07:07 修改

阅读量103

点赞数

分类专栏： bilibili视频源码文章标签： css html javascript

于 2022-06-13 21:45:56 首次发布

本文链接：https://blog.csdn.net/weixin_45562037/article/details/125268156

版权

bilibili视频源码专栏收录该内容

18 篇文章 0 订阅

订阅专栏

效果视频

（css + js）全选框清单列表2022-6-13

全部代码放心复制


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background: rgb(152, 232, 235);
    }
    .all{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 500px;
        height: 250px;
        margin: auto;
        border: 1px solid black;
        border-radius: 10px;
        box-shadow: 5px 10px #ccc;
        background: rgb(255, 255, 255);
    }
   input{
        width: 20px;
        height: 20px;
        margin:5px  0px 17px 10px;
   }
   span{
    color: black;
    margin-left: 30px;
   }
   .project{
    font-size: 25px;
   }
</style>
<body>
    <div class="all">
        <input type="checkbox"><span class="project">每日清单</span><br> 
        <hr>
        <div class="items">
            <input type="checkbox"><span>早上7点起床背单词</span>  <br>
            <input type="checkbox"><span>吃早餐</span> <br>
            <input type="checkbox"><span>看两个小时视频</span> <br>
            <input type="checkbox"><span>刷剧，看抖音</span> <br>
            <input type="checkbox"><span>复习功课</span> <br>
        </div>
    </div>
    <script>
        var allBtn = document.querySelector('.all > input');
        var itemBtns = document.querySelectorAll('.items>input');

        allBtn.onclick = function(){
            var type = allBtn.checked

            itemBtns.forEach(function(items){items.checked = type})
        }

        itemBtns.forEach(function(items){
            
            items.onclick = function(){
                var flag = true
                
                itemBtns.forEach(function(items){
                if(!items.checked)flag = false
            })
            allBtn.checked = flag
            }  

        })
    </script>
</body>
</html>