js原生全选,全不选,选项,反选

最新推荐文章于 2023-02-21 15:38:18 发布

有趣的前端

最新推荐文章于 2023-02-21 15:38:18 发布

阅读量139

点赞数 2

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/wys997/article/details/107744624

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

不多说,自己看上代码:
效果:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
            width: 10%;
            margin: 30px 45% 0;
            border: 1px solid #999;
            border-radius: 5px;
        }

        ul li {
            padding: 5px 0 5px 5px;
        }

        ul li:first-child {
            border-bottom: 1px solid #999;
        }

        a {
            text-decoration: none;
            color: #ed969e;
        }
    </style>
</head>
<body>
<ul>
    <li>
        <label>
            <input type="checkbox"> <span>全选</span> <a href="#">反选</a>
        </label>
    </li>
    <li>
        <label>
            <input type="checkbox"> 选项a
        </label>
    </li>
    <li>
        <label>
            <input type="checkbox"> 选项b
        </label>
    </li>
    <li>
        <label>
            <input type="checkbox"> 选项c
        </label>
    </li>
    <li>
        <label>
            <input type="checkbox"> 选项d
        </label>
    </li>
</ul>

<script>
    var checkbox = [...document.getElementsByTagName('input')];
    var all = checkbox.shift();

    //反选事件
    document.getElementsByTagName('a')[0].onclick = function () {
        for (let j = 0; j < checkbox.length; j++) {
            checkbox[j].checked = !checkbox[j].checked
        }
        ch();//调用小按钮事件
    }

    //全选按钮事件
    all.onclick = function () {
        for (let i = 0; i < checkbox.length; i++) {
            checkbox[i].checked = this.checked;
        }
        document.getElementsByTagName('span')[0].innerText = (this.checked ? '全不选' : '全选');
    }

    //给小选项添加点击事件
    for (let i = 0; i < checkbox.length; i++) {
        checkbox[i].onclick = ch;
    }

    //小选项点击事件
    function ch() {
        for (let j = 0; j < checkbox.length; j++) {
            if (checkbox[j].checked === false) {
                all.checked = false;
                document.getElementsByTagName('span')[0].innerText = '全选';
                return;
            }
            all.checked = true;
            document.getElementsByTagName('span')[0].innerText = '全不选';
        }
    }
</script>
</body>
</html>

有趣的前端

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js原生全选,全不选,选项,反选

不多说,自己看上代码:效果:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
复制链接

扫一扫