9.购物车的选择和购物车商品数量的调整

骤跌

于 2024-08-21 13:47:35 发布

阅读量1k

点赞数 33

分类专栏： JavaWeb见解文章标签： html 前端 css

本文链接：https://blog.csdn.net/2201_75994883/article/details/141383245

版权

购物车的选择和购物车商品数量的调整

一、购物车的选择
- 1.创建checkAll 函数——实现商品的全选
- 2.创建checkSingle 函数——实现商品的单选
二、购物车商品数量的调整

一、购物车的选择

要实现购物车中商品的选择，包括商品的单选和所有商品的全选。
第一步实现商品全选的函数：

1.创建checkAll 函数——实现商品的全选

这个函数的作用是选中或取消选中购物车中的所有商品。
当用户点击页面顶部的全选复选框时，会触发这个函数。
函数接收一个参数 checked，这个参数表示全选复选框的选中状态（true 表示选中，false 表示未选中）。
函数内部通过 document.querySelectorAll(“.my-box”) 获取页面上所有的商品复选框，并将它们的选中状态设置为与全选复选框一致。

    const checkAll = (checked) => {
   
        const boxes = document.querySelectorAll(".my-box");
        for (let i = 0; i < boxes.length; i++) {
   
            boxes[i].checked = checked;
        }
    }

函数解释：

参数checked是代表商品选择状态的布尔值变量，ture表示商品全选，false表示不全选。
其后我们通过类选择器找到所有匹配的元素，也就是选择所有带有 my-box 类的复选框元素。，并将document.querySelectorAll的NodeList类型的返回值放在boxes对象中。
在每一个商品卡片都有一个复选框：

        <td class="ps-4" >
          <input style="transform: scale(1.5);" class="form-check-input my-box"
          onclick="checkSingle()"
                 type="checkbox" value="${item.meal_id}">
        </td>

在这里from-check-input 是 Bootstrap 框架中的一个类名，它用于样式化 HTML 表单中的复选框（checkbox）和单选按钮（radio button）元素，其后的my-box就是它的类名。代码中 type="checkbox"定义了这是一个复选框。所以checkAll函数回匹配所有my-box的元素，通过遍历统一设置复选框状态，达到全选或全不选的效果。

目前我们只涉及到了两种选择器：
类选择器（Class Selector）：以点（.）开头，后面跟着类名。它用于选择所有具有指定类的元素。
ID 选择器（ID Selector）：以井号（#）开头，后面跟着 ID 名称。它用于选择具有指定 ID 的单个元素。
函数的最后然后遍历对象，把所有匹配的元素的选择状态都设置为入参的状态。

2.创建checkSingle 函数——实现商品的单选

这个函数的作用是更新全选复选框的状态，以反映用户对单个商品复选框的操作。
代码逻辑：当用户选中或取消选中任何一个商品复选框时，会触发这个函数。
函数内部首先获取所有商品复选框，然后检查它们是否全部被选中。
如果所有商品复选框都被选中，则全选复选框也被设置为选中状态；如果有任何一个商品复选框未被选中，则全选复选框也被设置为未选中状态。

    const checkSingle = () => {
   
        document.querySelector(".all-box").checked = document.querySelectorAll(".my-box:checked").length === document.querySelectorAll(".my-box").length;
    }

函数里面就只有一行代码。但是我们将代码分开会比较好理解一点。

document.querySelector(".all-box").checked：
这行代码使用 document.querySelector 方法选择页面上具有 .all-box 类的复选框元素。
.checked 属性用于获取或设置该复选框的选中状态。
document.querySelectorAll(".my-box:checked").length：
这行代码使用 document.querySelectorAll 方法选择页面上所有已经被选中的具有 .my-box 类的复选框元素。
:checked 是一个伪类选择器，用于选择所有选中状态的复选框。
.length 属性返回选中的复选框数量。
document.querySelectorAll(".my-box").length：