css选项卡设计

最新推荐文章于 2023-04-12 22:26:15 发布

青春、往昔浮流年〞

最新推荐文章于 2023-04-12 22:26:15 发布

阅读量215

点赞数 1

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/xss125/article/details/130111655

版权

该代码片段展示了如何使用JavaScript实现HTML中的全选/取消全选功能。当用户点击全选复选框时，所有子项复选框会被选中；反之，如果所有子项都被选中，全选复选框也会被自动选中。此功能通过绑定onclick事件来实现。

摘要由CSDN通过智能技术生成

<!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>

    <style>
        *{
            margin:0;
            padding:0;
            list-style-type:none;
        }
    #box1{
        width:200px;
        height: 400px;
        margin:0 auto;
        top:50px;
        position: absolute;
        top: 50px;
        left: 550px;
        border: 5px pink solid;
    }
    #box2{
        font-size: 30px;
        padding: 20px;
    }
    </style>
</head>
<body>
    <div id="box1">
        <ul id="box2">
            <li>全选：<input id = 'all'value = '全选' type='checkbox'></li>
            <li> 选项一：<input id = 'list1' type='checkbox'></li>
            <li> 选项二：<input id = 'list2' type='checkbox'></li>
            <li> 选项三：<input id = 'list3' type='checkbox'></li>
            <li> 选项四：<input id = 'list4' type='checkbox'></li>
        </ul>
        
      
       
       
       
    </div>

    
<script>
    //绑定事件
    var bot = document.getElementById('all')
    var list1 = document.getElementById('list1')
    var list2 = document.getElementById('list2')
    var list3 = document.getElementById('list3')
    var list4 = document.getElementById('list4')

    bot.onclick = function(){
        if(bot.checked==true){
            list1.checked=true
            list2.checked=true
            list3.checked=true
            list4.checked=true
        }
        if(bot.checked==false){
            list1.checked=false
            list2.checked=false
            list3.checked=false
            list4.checked=false
        }
    }
    list1.onclick = function(){

        if(list1.checked==true&&list2.checked==true&&list3.checked==true&&list4.checked==true){
            bot.checked=true
        }
        else {
        bot.checked=false
    }
    }

    list2.onclick = function(){

    if(list1.checked==true&&list2.checked==true&&list3.checked==true&&list4.checked==true){
    bot.checked=true}
    else {
        bot.checked=false
    }
}

list3.onclick = function(){

    if(list1.checked==true&&list2.checked==true&&list3.checked==true&&list4.checked==true){
    bot.checked=true}
    else {
        bot.checked=false
    }
}
   list4.onclick = function(){
    if(list1.checked==true&&list2.checked==true&&list3.checked==true&&list4.checked==true){
    bot.checked=true}
    else {
        bot.checked=false  }
}

</script>
</body>
</html>