jQuery|原生js-分别购物车全选|全不选-勾选|不勾选自动计算

jQuery|原生js-分别购物车全选|全不选-勾选|不勾选自动计算

1. 使用jQuery完成购物车全选/全不选操作;
2. 这现勾选/不勾选商品时购物车也能自动完成计算

• head 中引入购物车样式和jQuery库

<!-- 购物车css样式 -->
<link rel="stylesheet" href="style.css" />
<!-- 引入 jQuery 库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

• 引入的购物车样式 style.css 是默认的

table {
  border-collapse: collapse;
  width: 90%;
  text-align: center;
  margin: auto;
}
table caption {
  margin-bottom: 15px;
  font-size: 1.5rem;
}
table th,
table td {
  border-bottom: 1px solid #ccc;
  padding: 5px;
  font-weight: normal;
}
table thead tr:first-of-type {
  background-color: #e6e6e6;
  height: 3em;
}
table input[type="checkbox"] {
  width: 1.5em;
  height: 1.5em;
}
table tbody tr {
  border-bottom: 1px solid #ccc;
}
table tbody tr:hover {
  background-color: #f6f6f6;
  cursor: pointer;
}
tbody img {
  width: 3em;
}
tbody input[type="number"] {
  width: 3em;
}
button {
  width: 150px;
  height: 30px;
  outline: none;
  border: none;
  background-color: teal;
  color: white;
  letter-spacing: 5px;
}
button:hover {
  opacity: 0.7;
  cursor: pointer;
}

• body 中添加购物车html是默认的

<table>
    <caption>
        购物车
    </caption>
    <thead>
        <tr>
            <!-- 全选复选框 -->
            <th><input type="checkbox" name="checkAll" id="check-all" checked /><label for="check-all">全选</label>
            </th>
            <th>图片</th>
            <th>品名</th>
            <th>单位</th>
            <th>单价/元</th>
            <th>数量</th>
            <th>金额/元</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="checkbox" name="item" value="SN-1020" checked />
            </td>
            <td>
                <a href=""><img src="images/p1.jpg" alt="" /></a>
            </td>
            <td>iPhone 11</td>
            <td>台</td>
            <td class="price">4799</td>
            <td><input type="number" min="1" value="1" /></td>
            <td class="amount">xxxx</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="item" value="SN-1020" checked />
            </td>
            <td>
                <a href=""><img src="images/p2.jpg" alt="" /></a>
            </td>
            <td>小米pro 11</td>
            <td>部</td>
            <td class="price">3999</td>
            <td><input type="number" min="1" value="2" /></td>
            <td class="amount">xxxx</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="item" value="SN-1030" checked />
            </td>
            <td>
                <a href=""><img src="images/p3.jpg" alt="" /></a>
            </td>
            <td>MacBook Pro</td>
            <td>台</td>
            <td class="price">18999</td>
            <td><input type="number" min="1" value="1" /></td>
            <td class="amount">xxxx</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="item" value="SN-1040" checked />
            </td>
            <td>
                <a href=""><img src="images/p4.jpg" alt="" /></a>
            </td>
            <td>小米75电视</td>
            <td>台</td>
            <td class="price">5999</td>
            <td><input type="number" min="1" value="2" /></td>
            <td class="amount">xxxx</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="item" value="SN-1050" checked />
            </td>
            <td>
                <a href=""><img src="images/p5.jpg" alt="" /></a>
            </td>
            <td>Canon 90D单反</td>
            <td>台</td>
            <td class="price">9699</td>
            <td><input type="number" min="1" value="1" /></td>
            <td class="amount">xxxx</td>
        </tr>
    </tbody>
    <tfoot>
        <tr style="font-weight: bolder; font-size: 1.2em">
            <td colspan="5">总计:</td>
            <td id="sum">xxxx</td>
            <td id="total-amount">xxxx</td>
        </tr>
    </tfoot>
</table>
<div style="width: 90%; margin: 10px auto">
    <button style="float: right; width: 100px">结算</button>
</div>

1. 使用jQuery完成购物车全选/全不选操作

• body 中 script 标签中添加js

// 使用jQuery完成购物车全选/全不选操作
// 全选复选框
const checkAll = $("#check-all");
// 独立复选框
const checkItems = $("input[name=\"item\"]");
// 改变全选，独立复选框也改变
checkAll.change(ev => checkItems.each(function () {
    $(this).prop('checked', $(ev.target).is(':checked'));
}));
// 改变独立复选框，改变全选
checkItems.change(() => checkAll.prop('checked', [...checkItems].every(item => item.checked)));

2. 这现勾选/不勾选商品时购物车也能自动完成计算

• 续写 jQuery 版购物车完成自动计算

// 购物车，数据填充
function cart() {
    // 独立单价组
    let pricesObj = $('.price').map((i, ele) => $(ele).text() * 1);
    // 独立数量组
    let numbersObj = $('input[type="number"]').map((i, ele) => $(ele).val() * 1);
    // 独立金额组
    let amountsObj = [pricesObj, numbersObj].reduce((total, curr) => total.map((i, item) => item * curr[i]));
    // 独立金额数据填充，由单品数量改变触发，与独立复选框状态无关
    $('.amount').each((i, ele) => ($(ele).text(amountsObj[i])));
    // 总数量，总金额的计算由独立复选框选中状态确定
    // 获取所有独立复选框元素
    let items = $("input[name=\"item\"]");
    // 过滤出所有独立复选框选中状态的组
    numbersObj = numbersObj.filter((i, ele) => $(items[i]).is(':checked'));
    // 过滤出所有独立复选框选中状态的金额组
    amountsObj = amountsObj.filter((i, ele) => $(items[i]).is(':checked'));
    // 计算总数量和总金额
    let sum = [...numbersObj].reduce((p, n) => p + n, 0);
    let total = [...amountsObj].reduce((p, n) => p + n, 0);
    // 填充总数量和总金额到页面中
    $('#sum').text(sum);
    $('#total-amount').text(total);
}
// 改变单品数量时触发
$('input[type="number"]').each((i, ele) => $(ele).change(function(){
    cart();
}));
// 改变独立复选框状态时触发
$("input[name=\"item\"]").each((i, item) => $(item).change(function(){
    cart();
}));
// 全选状态改变时触发
$('#check-all').change(function(){
    cart();
});
// 页面载入完成后触发
$(function(){
    cart();
});

• 将以上 jQuery 版购物车全部注释，原生 js 版，完成自动计算

// 原生js购物车全选/全不选操作
// 全选复选框
const checkAll = document.getElementById('check-all');
// 独立复选框
const checkItems = document.getElementsByName('item');
// 改变全选，独立复选框也改变
checkAll.onchange = ev => checkItems.forEach(item => item.checked = ev.target.checked);
// 改变独立复选框，改变全选
checkItems.forEach(item => item.onchange = () => checkAll.checked = [...checkItems].every(ele => ele.checked));
// 购物车，数据填充
function cart() {
    // 独立单价数组
    let pricesArr = [...document.getElementsByClassName('price')].map(p => p.textContent * 1);
    // 独立数量数组
    let numbersArr = [...document.querySelectorAll('input[type="number"]')].map(n => n.value * 1);
    // 独立金额数组
    let amountsArr = [pricesArr, numbersArr].reduce((total, curr) => total.map((item, i) => item * curr[i]));
    // 独立金额数据填充，由单品数量改变触发，与独立复选框状态无关
    document.querySelectorAll('.amount').forEach((ele, i) => (ele.textContent = amountsArr[i]));
    // 总数量，总金额的计算由独立复选框选中状态确定
    // 获取所有独立复选框元素
    let items = document.getElementsByName('item');
    // 过滤出所有独立复选框选中状态的数量数组
    numbersArr = numbersArr.filter((ele, i) => [...items][i].checked);
    // 过滤出所有独立复选框选中状态的金额数组
    amountsArr = amountsArr.filter((ele, i) => [...items][i].checked);
    // 计算总数量和总金额
    let sum = numbersArr.reduce((p, n) => p + n, 0);
    let total = amountsArr.reduce((p, n) => p + n, 0);
    // 填充总数量和总金额到页面中
    document.getElementById('sum').textContent = sum;
    document.getElementById('total-amount').textContent = total;
}
// 改变单品数量时触发
document.querySelectorAll('input[type="number"]').forEach(ele => ele.onchange = cart);
// 改变独立复选框状态时触发
document.getElementsByName('item').forEach(item => item.onchange = cart);
// 全选状态改变时触发
// 由于前面 check-all 已添加 onchange 事件，这里使用事件监听
document.getElementById('check-all').addEventListener('change', cart);
// 页面载入完成后触发
window.onload = cart;

• 效果和 jQuery 版是一样的

• 点击取消全选，数量和总金额清零

• 只选中第2和第3个商品，将第3个商品数量改为2，改动其它未被选中的商品，不计算在总计内，只计算到右边独立商品的金额处