JS反选全选案例

最新推荐文章于 2024-04-02 19:39:43 发布

_七七

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量154

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_43472877/article/details/127119067

版权

JavaScript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!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>
        // 实现全选 单选功能
        // 得到单项的dom对象
        const list = Array.from(document.getElementsByClassName('item'));
        // 得到全选框的dom对象
        const all = document.getElementById('all')
        // console.log(list);

        // 全选
        function allChange() {
            list.forEach((item) => {
                item.checked = all.checked
            })
        }

        all.onchange = allChange

        // 单个选项框决定全选状态
        list.forEach(element => {
            element.onchange = () => {
                // 设置一个空值全选框的默认值
                var isDisplay = true
                // 如果有单选框为flase 全选框就为false 否则为true
                list.forEach(value => {
                    if (value.checked === false) {
                        isDisplay = false
                    }
                })
                // console.log(isDisplay);
                // 事件改变 最后赋值全选状态
                all.checked = isDisplay;
            }
        });

    </script>
</body>

</html>