购物车模式，添加商品，自动计算总价

 <table>

        <thead>

            <tr>

                <th>选择</th>

                <th>名称</th>

                <th>图片</th>

                <th>单价</th>

                <th>数量</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td><input type="checkbox" class="checkIpn"></td>

                <td>苹果</td>

                <td><img src="./9c16fdfaaf51f3def01cb3429aeef01f3a29796d.jpg" alt=""></td>

                <td>&yen;<span class="price">3</span></td>

                <td>

                    <button class="reduce">-</button>

                    <button class="count">1</button>

                    <button class="add">+</button>

                </td>

            </tr>

            <tr>

                <td><input type="checkbox" class="checkIpn"></td>

                <td>香蕉</td>

                <td><img src="./2e2eb9389b504fc2e32dc423ebdde71190ef6da1.jpg" alt=""></td>

                <td>&yen;<span class="price">2</span></td>

                <td>

                    <button class="reduce">-</button>

                    <button class="count">1</button>

                    <button class="add">+</button>

                </td>

            </tr>

            <tr>

                <td><input type="checkbox" class="checkIpn"></td>

                <td>草莓</td>

                <td><img src="./u=784993247,2393544077&fm=26&fmt=auto&gp=0.webp" alt=""></td>

                <td>&yen;<span class="price">5</span></td>

                <td>

                    <button class="reduce">-</button>

                    <button class="count">1</button>

                    <button class="add">+</button>

                </td>

            </tr>

            <tr>

                <td><input type="checkbox" class="checkIpn"></td>

                <td>橘子</td>

                <td><img src="./9a504fc2d5628535dc95a7079eef76c6a7ef639a.jpg" alt=""></td>

                <td>&yen;<span class="price">4</span></td>

                <td>

                    <button class="reduce">-</button>

                    <button class="count">1</button>

                    <button class="add">+</button>

                </td>

            </tr>

        </tbody>

    </table>

    <div>

        <input type="checkbox" name="" id="all">全选

        <h3>总计：&yen;<span class="totalprice">0.00</span></h3>

    </div>

</body>

<script>

    var checkInp = document.getElementsByClassName('checkIpn')//所有复选框

    var checkAll = document.getElementById('all')//全选按钮

    var reduceBtn = document.getElementsByClassName('reduce')//减

    var countEles = document.getElementsByClassName('count')//数量

    var addBtn = document.getElementsByClassName('add')//加

    var price = document.getElementsByClassName('price')//单价

    var totalPrice = document.getElementsByClassName('totalprice')[0] //总价

    // 1.全选 和 取消全选

    // 计算单价：单价 * 数量 + 原来的总价

    var checkedNum = 0

    for (var i = 0; i < checkInp.length; i++) {

        checkInp[i].index = i

        checkInp[i].onchange = function () {

            // 获取单价

            var priceYi = price[this.index].innerHTML

            // 获取数量

            var count = countEles[this.index].innerHTML

            console.log(priceYi, count);

 

            if (this.checked == true) {//选中

                checkedNum++;

                // // 计算价格 单价 数量 原来的总价

                totalPrice.innerHTML = totalPrice.innerHTML * 1 + priceYi * count * 1;

            } else {

                checkedNum--;

                totalPrice.innerHTML = totalPrice.innerHTML * 1 - priceYi * count * 1

            }

            if (checkedNum == checkInp.length) {//全选

                checkAll.checked = true

            } else {//非全选

                checkAll.checked = false

            }

        }

    }

    checkAll.onchange = function () {

        for (var i = 0; i < checkInp.length; i++) {

            checkInp[i].checked = checkAll.checked

        }

        if (checkAll.checked) {

            checkedNum = checkInp.length

             // 计算总价

            var tp = 0;

            for (var i = 0; i < price.length; i++) {

                var p = price[i].innerHTML;//单价

                var n = countEles[i].innerHTML;//数量

               tp+=p*n*1;//求和

                  

            }

            totalPrice.innerHTML = tp;

            console.log(tp);

        } else {

            checkedNum = 0

            totalPrice.innerHTML = 0

        }

    }

    // 2.数量的增减

    for (var i = 0; i < addBtn.length; i++) {

        addBtn[i].index = i

        addBtn[i].onclick = function () {

            var countElesYi = countEles[this.index] //第几个的数量

            countElesYi.innerHTML++

            // // 计算几个 取决于 input是否是选中状态

            var checkInput = checkInp[this.index]//第几个复选框

            var p = price[this.index].innerHTML;//单价

            if (checkInput.checked ) {

                totalPrice.innerHTML = totalPrice.innerHTML * 1 + p * 1

            }

        }

    }

    for (var i = 0; i < reduceBtn.length; i++) {

        reduceBtn[i].index = i

        reduceBtn[i].onclick = function () {

            var countElesYi = countEles[this.index]

            countElesYi.innerHTML--

            if (countElesYi.innerHTML == 0) {

                countElesYi.innerHTML = 1

                return ;

            }

            // // 计算几个 取决于 input是否是选中状态

            var checkInput = checkInp[this.index]//第几个复选框

            var p = price[this.index].innerHTML;//第几个单价

            if (checkInput.checked == true) {

                totalPrice.innerHTML = totalPrice.innerHTML * 1 - p * 1

                // console.log(totalPrice.innerHTML);

            }

        }

    }