JS基础-批量选择

最新推荐文章于 2023-02-03 11:48:20 发布

「已注销」

最新推荐文章于 2023-02-03 11:48:20 发布

阅读量357

点赞数

分类专栏： JS学习笔记（个人）

本文链接：https://blog.csdn.net/weixin_45799003/article/details/116429687

版权

JS学习笔记（个人）专栏收录该内容

92 篇文章 1 订阅

订阅专栏

页面如下，实现三个功能！
批量选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>批量选择</title>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #panel {
        width: 400px;
        box-shadow: 0 0 10px #000000;
        margin: 100px auto;
        padding: 20px;
    }

    .panel-header {
        text-align: center;
        margin-bottom: 10px;
    }

    .panel-footer {
        text-align: center;
        margin-top: 10px;
    }
</style>

<body>
<div id="panel">
    <section class="panel-header">
        <h2>歌手排行榜</h2>
        <hr>
    </section>
    <section class="panel-content">
        <label for=""><input type="checkbox">时间都去哪儿了！还不赶紧去学习！</label><br>
        <label for=""><input type="checkbox">时间都去哪儿了！还不赶紧去学习！</label><br>
        <label for=""><input type="checkbox">时间都去哪儿了！还不赶紧去学习！</label><br>
        <label for=""><input type="checkbox">时间都去哪儿了！还不赶紧去学习！</label><br>
        <label for=""><input type="checkbox">时间都去哪儿了！还不赶紧去学习！</label><br>
        <label for=""><input type="checkbox">时间都去哪儿了！还不赶紧去学习！</label><br>
    </section>
    <section class="panel-footer">
        <hr>
        <button id="allSelect">全选</button>
        <button id="cancelSelect">取消选中</button>
        <button id="reverseSelect">反选</button>
    </section>
</div>

<script>
    window.onload = function (ev) {
        /*获取所有的复选框*/
        var inputs = document.querySelectorAll('input');
        /*全选*/
        $('allSelect').addEventListener('click',function (ev1) {
            for(var i = 0;i<inputs.length;i++){
                var input = inputs[i];
                input.checked = true;
            }
        })
        /*反选*/
        $('reverseSelect').addEventListener('click',function (ev1) {
            for(var i = 0;i<inputs.length;i++){
                var input = inputs[i];
                input.checked = !input.checked;
            }
        })
        /*取消选中*/
        $('cancelSelect').addEventListener('click',function (ev1) {
            for(var i = 0;i<inputs.length;i++){
                var input = inputs[i];
                input.checked = false;
            }
        })
    }
        /*封装的￥函数*/
    function $(id) {
        return typeof id === "string" ? document.getElementById(id) : null;
    }
</script>
</body>
</html>

感觉晚上一点睡觉，早上八点半起床，为什么还困呢！打算中午补觉，可还是迷迷噔噔的！个人觉得其实，还是应该早点儿睡！

「已注销」

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS基础-批量选择

页面如下，实现三个功能！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>批量选择</title></head><style> * { margin: 0; padding: 0; list-style: none; } #p
复制链接

扫一扫