JavaScript使用数组的every与forEach方法实现全选以及取消全选功能

最新推荐文章于 2022-12-07 10:28:33 发布

wang_9909

最新推荐文章于 2022-12-07 10:28:33 发布

阅读量852

点赞数

本文链接：https://blog.csdn.net/wang_9909/article/details/119812027

版权

JavaScript 同时被 3 个专栏收录

45 篇文章 0 订阅

订阅专栏

html

34 篇文章 1 订阅

订阅专栏

个人网页

20 篇文章 0 订阅

订阅专栏

有时我们需要实现全选以及取消全选功能。使用数组方法就非常简单！

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

<body>
    <div><input type="checkbox" name="chall" id="">全选</div>
    <ul>
        <li><input type="checkbox" name="goods" id="">1</li>
        <li><input type="checkbox" name="goods" id="">2</li>
        <li><input type="checkbox" name="goods" id="">3</li>
        <li><input type="checkbox" name="goods" id="">4</li>
    </ul>

    <script>
        var shop = document.getElementsByName('goods'), //获取li的多选节点
            butAll = document.getElementsByName('chall')[0];//获取全选按钮节点

        var dom = Array.from(shop);//为了使用数组的every方法  利用Array.from将维数组转为数组
        shop.forEach((item, index) => { 
            item.addEventListener('click', function () {//给li的多选逐一绑定选择事件
                var result = dom.every((item, index) => { //判断li的多选框是都全选了
                    return item.checked
                })
                butAll.checked = false //默认为全选按钮为没全选
                if (result) butAll.checked = true //如果every的返回值为true
    
            })
        })
        butAll.addEventListener('click', function () {  //全选按钮绑定事件
            shop.forEach((item, index) => {
                item.checked = butAll.checked //将li的input的checked与全选的checked进行绑定
            })
        })
    </script>
</body>

</html>

效果如下:

wang_9909

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript使用数组的every与forEach方法实现全选以及取消全选功能

<!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"> <titl.
复制链接

扫一扫