JavaScript 购物车中的全选和单选及总金额计算的简易代码

最新推荐文章于 2023-03-15 23:05:55 发布

TA_WORLD

最新推荐文章于 2023-03-15 23:05:55 发布

阅读量5.5k

点赞数 4

分类专栏： JavaScript 文章标签： js checkbox dom

本文链接：https://blog.csdn.net/qq_56303170/article/details/119463308

版权

JavaScript 专栏收录该内容

17 篇文章

订阅专栏

全选和单选

案例分析

全选和取消全选做法：让下面所有的复选框的checked属性(选中状态)跟随全选按钮即可
当单选全部勾选的时候，全选的选框自动勾选，当失去个别单选选框的时候，全选选框失去勾选
最后计算金额的时候，遍历单选框的checked的属性，若为true，则加上价格

注意：修改checked属性时，等号的右边不需要使用引号，否则效果可能会无法显现

在全选和取消全选的代码中，使用的是this.checked，而不使用flag来标记，这样子代码更精简，如果使用flag，那么可能会使用两个for循环

<!DOCTYPE html>
<html>
    <head>
        <title>全选和单选</title>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th><input type="checkbox" name="choseAll" id="choseAll"></th>
                    <th>商品</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" name="goodList"></td>
                    <td>商品1</td>
                    <td class="price">1000</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="goodList"></td>
                    <td>商品2</td>
                    <td class="price">20000</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="goodList"></td>
                    <td>商品3</td>
                    <td class="price">100</td>
                </tr>
            </tbody>
        </table>
        <button>确定</button>
        <a>最后总共消费0元</a>
        <script type="text/javascript">
            var chose_all = document.getElementById('choseAll');
            var inputList = document.getElementsByName('goodList');
            var price = document.querySelectorAll('.price');
            var submit = document.querySelector('button');
            var result = document.querySelector('a');
            //全选或者取消全选
            chose_all.onclick = function(){
                for (let i = 0; i < inputList.length; i++) {
                    inputList[i].checked = this.checked;
                }
            }
            //单选对全选的影响
            flag = false;
            for (let i = 0; i < inputList.length; i++) {
                inputList[i].onclick = function(){
                    for (let i = 0; i < inputList.length; i++) {
                        if(inputList[i].checked == true){
                            flag = true;
                        }else{
                            flag = false;
                            break;
                        }
                    }
                    chose_all.checked = flag;
                }
            }
			//对最后金额的计算
            submit.onclick = function(){
                let sum = 0;
                for (let i = 0; i < inputList.length; i++) {
                    if(inputList[i].checked == true){
                        sum += parseInt(price[i].innerText);
                    }
                }
                result.innerText = '最后总共消费' + sum + '元';
            }
        </script>
    </body>
</html>