使用JavaScript编写购物车常用功能!!

思路:

1.全选框勾选时,单值复选框也勾选

2.单值复选框未勾选时,全选框也不勾选

3.数量变动时,自动计算数量的总和与金额总和

4.单值复选框未勾选时,不参与计算总和,且页面价格不显示为0

首先制作一个购物车HTML表单,如下图所示

HTML代码

<main>
    <h1>购物车</h1>
    <ul class="title">
        <li><input type="checkbox" name="checkAll" id="check-all" checked /><label for="check-all">全选</label></li>
        <li>图片</li>
        <li>品名</li>
        <li>单位</li>
        <li>单价/元</li>
        <li>数量</li>
        <li>金额/元</li>
    </ul>
    <ul class="commodity">
        <input type="checkbox" name="item" value="SN-1020" checked />
        <li class="imgs">
            <a href=""><img src="images/1.jpg" alt="" /></a>
        </li>
        <li>i9 台式电脑</li>
        <li>台</li>
        <li class="price"><span class="iconfont icon-fl-renminbi"></span>9800</li>
        <input type="number" min="1" value="1" />
        <li class="amount"><span class="iconfont icon-fl-renminbi"></span></li>
    </ul>
    <ul class="commodity">
        <input type="checkbox" name="item" value="SN-1020" checked />
        <li class="imgs">
            <a href=""><img src="images/4.jpg" alt="" /></a>
        </li>
        <li>MacBook Pro</li>
        <li>台</li>
        <li class="price"><span class="iconfont icon-fl-renminbi"></span>10980</li>
        <input type="number" min="1" value="1" />
        <li class="amount"><span class="iconfont icon-fl-renminbi"></span></li>
    </ul>
    <ul class="commodity">
        <input type="checkbox" name="item" value="SN-1020" checked />
        <li class="imgs">
            <a href=""><img src="images/5.jpg" alt="" /></a>
        </li>
        <li>小米75电视</li>
        <li>台</li>
        <li class="price"><span class="iconfont icon-fl-renminbi"></span>4999</li>
        <input type="number" min="1" value="1" />
        <li class="amount"><span class="iconfont icon-fl-renminbi"></span></li>
    </ul>
    <ul class="commodity">
        <input type="checkbox" name="item" value="SN-1020" checked />
        <li class="imgs">
            <a href=""><img src="images/6.jpg" alt="" /></a>
        </li>
        <li>Canon D单反</li>
        <li>台</li>
        <li class="price"><span class="iconfont icon-fl-renminbi"></span>8999</li>
        <input type="number" min="1" value="1" />
        <li class="amount"><span class="iconfont icon-fl-renminbi"></span></li>
    </ul>
    <!-- 购物车列表 start-->
    <ul class="commodity">
        <input type="checkbox" name="item" value="SN-1020" checked />
        <li class="imgs">
            <a href=""><img src="images/7.jpg" alt="" /></a>
        </li>
        <li>高清摄像头</li>
        <li>台</li>
        <li class="price"><span class="iconfont icon-fl-renminbi"></span>299</li>
        <input type="number" min="1" value="2" />
        <li class="amount"><span class="iconfont icon-fl-renminbi"></span></li>
    </ul>
    <!-- 购物车列表 end-->
    <ul class="total">
        <li>总计:</li>
        <li class="quantity"></li>
        <li class="accounts"><span class="iconfont icon-fl-renminbi"></span></li>
    </ul>
    <ul class="settlement">
        <button><span class="iconfont icon-gouwuche"></span>结算</button>
    </ul>
    </main>

CSS代码

@import "../font_icon/iconfont.css";
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: #2f2f2f;
}
:root {
    font-size: 16px;
}
li {
    list-style: none;
}
main {
    display: grid;
    gap: 0.2rem;
    margin: 2rem 5rem;
    min-width: 800px;
}
h1 {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 500;
    height: 3rem;
}
.title {
    background-color: #ebebeb;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    place-items: center;
    line-height: 3.5rem;
    font-weight: bold;
    border-bottom: 1px solid #a3a3a3;
}
.title label {
    cursor: pointer;
}
.commodity {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    place-items: center;
    border-bottom: 1px solid #a3a3a3;
}
.commodity:hover {
    background-color: #ebebeb;
}
.commodity input {
    cursor: pointer;
}
.commodity input:last-of-type {
    width: 5rem;
    height: 2rem;
    outline: none;
    border: none;
    text-align: center;
    font-size: 1rem;
}
.commodity .imgs {
    width: 2.5rem;
}
.commodity .imgs img {
    width: 100%;
    margin: .3rem;
}
.total {
    background: ghostwhite;
    grid-template-columns: 5fr repeat(2, 1fr);
    display: grid;
    text-align: center;
    line-height: 3rem;
    font-weight: bold;
}
.settlement {
    place-self: end;
}
.settlement>button {
    width: 8rem;
    padding: .5rem;
    font-size: 1rem;
    text-align: center;
    color: mintcream;
    outline: none;
    border: none;
    cursor: pointer;
    background-color: lightsteelblue;
}
.settlement>button:hover {
    background: lightslategrey;
}
.settlement>button>span {
    color: #da3776;
    font-weight: bold;
    font-size: 1.5rem;
    margin-right: .5rem;
}

JS代码如下

    <script>
        // 获取所有的数量控件
        const numInput = document.querySelectorAll('[type="number"');
        // 用户更新数量时触发自动计算
        numInput.forEach(input => (onchange = autoCalculate));
        // 购物车刚加载完成时也应该触发自动计算
        window.onload = autoCalculate;
        // 封装一个自动计算的函数
        function autoCalculate() {
            // 复选框全选
            const checkAll = document.querySelector('#check-all');
            // 复选框单选
            const checkItems = document.querySelectorAll('.commodity> [name="item"]');
            // 拿到复选框全选和单选框
            checkAll.onchange = check => checkItems.forEach(item => (item.checked = check.target.checked));
            // 单选框单选时全选也会取消
            checkItems.forEach(item => (item.onchange = ev => (checkAll.checked = Array.from(checkItems).every(item => item.checked))));
            // 获取新的单选框状态.选中1.未选中0:
            const checkItemsNews = Array.from(checkItems).map((item, index) => item.checked ? item[index] = 1 : item[index] = 0);
            // 获取单价组成的数组
            const prices = document.querySelectorAll('.price');
            // 遍历单价每个值
            const priceArr = Array.from(prices).map(item => item.textContent * 1);
            // 获取数量组成的数组
            const numbers = document.querySelectorAll('[type="number"]');
            // 遍历数量每个值
            const numArr = Array.from(numbers).map(item => parseInt(item.value));
            //乘以选中状态,获取新每个值
            const numArrNews = numArr.map((item, index) => item * checkItemsNews[index]);
            // 计算新量数的总计
            const num = numArrNews.reduce((item, curr) => item + curr);
            // 单选框未定义计算单价乘以数量的值
            const priceOld = [priceArr, numArr].reduce((items, curr) => items.map((item, index) => item * curr[index]));
            // 计算单价乘以数量的值
            const priceArray = [priceArr, numArrNews].reduce((items, curr) => items.map((item, index) => item * curr[index]));
            // 全部商品金额总计
            const priceAll = priceArray.reduce((item, curr) => item + curr);
            // 将计算结果渲染到购物车中
            // 总数量
            document.querySelector(".quantity").textContent = num;
            // 总金额
            document.querySelector(".accounts>span").textContent = priceAll;
            // 每个商品的金额
            document.querySelectorAll(".amount>span").forEach((item, index) => (item.textContent = priceOld[index]));
        }
    </script>