关于购物车商品全选和反选问题的原生JS写法

不想成为红烧肉的猪

已于 2023-03-15 23:07:35 修改

阅读量757

点赞数 1

文章标签： javascript 前端

于 2023-03-15 23:05:55 首次发布

本文链接：https://blog.csdn.net/qq_44249731/article/details/129570796

版权

文章目录

前言
一、HTML部分
二、JS部分
总结

前言

	前端设计中，在做一些商城项目时，经常会遇到表单数据问题，其中关于商品元素的全选和反选问题是不可避免的。
	本篇文章，主要介绍的是在JS学习初期，在关于购物车商品全选、反选的原生JS写法。

一、HTML部分

首先是关于HTML部分的基本布局，不多解释。代码如下：

<style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="  反 选  " id="btn">
    </div>
<body>

在这里插入图片描述

二、JS部分

1.想要实现的效果

仅当表单中元素全部被选中时，全选框自动更新为选中状态。
当选择全选框时，表单中商品元素自动更新为选中状态。
点击反选按钮时，自动更新商品选择框状态。

2.封装DOM节点获取函数

比较简单，获取全部满足的条件的节点对象，返回一个nodelist伪数组，判断其length，若唯一则说明只有一个满足，直接取出0号元素即可。否则说明有多个满足条件的节点对象。代码如下：

 // 获取节点方法
    function $(ele) {
      var res = document.querySelectorAll(ele);
      return res.length == 1 ? res[0] : res;
    }

3.主要代码

将JS主体代码写在了自执行函数中，一方面可以起到封装的效果，另外它可以创建独立的作用域，避免全局污染。
关于使用数组方法some()判断所有商品状态的具体流程。
some() ----用于检测数组中的元素是否满足指定条件,有一个满足则返回true,没有满足的返回false
return !v.checked-----遍历数组元素v时，每次判断!v.checked，当v中有一个checked值为false时（该商品未被选中），表示 !v.checked表达式为true，则some()函数返回值为true。也就是说，当仍有商品未被选中时，isChecked的值为true。
反过来理解比较简单，当商品元素全部选中时，其每次遍历v的checked值皆为true，取反后皆为false，则表达式!v.checked没有true值，some返回值为false。

 var isChecked = [...$('#j_tb input')].some(function (v) {
     return !v.checked;
 })

具体代码如下：

//绑定全选事件
+function () {
    $('#j_cbAll').onclick = function () {
        // console.log(this.checked);
        checkOneGoods(this.checked)
    }

    //单个商品状态同时更新
    function checkOneGoods(sta) {
        $('#j_tb input').forEach(element => {
            // console.log(element);
            element.checked = sta;
        });
    }

    //单个商品点击事件绑定
    $('#j_tb input').forEach(function (v) {
        v.onclick = function () {
            if (this.checked) {
                //遍历是否还有选项未选
                //...将伪数组转为真数组
                //利用some方法判断是否仍有商品元素未被选中
                var isChecked = [...$('#j_tb input')].some(function (v) {
                    // console.log(v.checked);
                    return !v.checked;
                })
                //短路表达式，当!isChecked为true时，执行后面的表达式
                !isChecked && ($('#j_cbAll').checked = true)
            } else {
                $('#j_cbAll').checked = false
            }
        }
    })

    //反选
    $('#btn').onclick = function () {
    //遍历商品元素，将其Checked取反
        $('#j_tb input').forEach(element => {
            element.checked = element.checked ? false : true;
            //考虑全选的情况下，点击反选
            var isChecked = [...$('#j_tb input')].some(function (v) {
                return !v.checked;
            })
         $('#j_cbAll').checked = !isChecked ? true : false
        });
    }
}()