购物车实现选中商品算出总价（js）

思想：a:首先可以通过数据库，当你点击一次选择时，对复选框进行扫描，查出所有已经被选中的复选框，这个复选框需要加一个自定义属性，这个属性就是这个商品的id号，通过id号在数据库查询相应的价格进行累加。b:我这里没有用数据库，因为我的上一个需求已经把价格从数据库拿出来了，所以我直接在复选框上加了一个商品价格的自定义属性，当每次点击复选框时对复选框进行扫描，查出所有已经被选中的复选框，然后获取到价格进行累加

效果
1.首先没点击时时0元
在这里插入图片描述
2.当点击一个复选框

3.当点击两个复选框

4.当点击全选复选框时

5.点击全不选

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link href="_css_/bootstrap.css" rel="stylesheet">
    <script src="_js_/bootstrap.min.js"></script>
    <script type="text/javascript" src="_js_/jquery.min.js"></script>
    <script type="text/javascript" src="_js_/clientJs/shopping_car.js"></script>
</head>
<body>
<div class="container" id="app">
    <div class="row">
        <!-- bootstrap的面板组件包含带标题的面板、带表格的面板灯 -->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">我的购物车</h3>
            </div>
            <div class="panel-body">
                <!-- 带表格的面板 table-hover:鼠标悬停高亮的表格-->
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th><input type="checkbox" id="all_or_no"   onclick="check_all_no()"></th>
                        <th>序号</th>
                        <th>商品名称</th>
                        <th>商品单价(元)</th>
                        <th>购买数量</th>
                        <th>小计（元）</th>
                        <th>商品操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {volist name='car' id='car'}
                    <tr>
                        <td>
                            <input type="checkbox" name="car_goods" goods_price="{$car.goods_price}" onclick="total()">
                        </td>
                        <td>{$i}</td>
                        <td>{$car.goods_name}</td>
                        <td>{$car.goods_price}</td>
                        <td>1</td>
                        <td>{$car.goods_price}</td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <button class="btn btn-danger" type="button">删除</button>
                            </div>
                        </td>
                    </tr>
{/volist}
                    </tbody>
                </table>
            </div>
            <!-- 带脚注的面板 -->
            <div class="panel-footer" style="text-align: right;">
                <button class="btn btn-danger" type="button">结算</button>
                共计<span id="total">0</span>元
            </div>
        </div>

    </div>
</div>
</body>
</html>

$(function(){
    var all_or_no = document.getElementById("all_or_no");
    var car_goods = document.getElementsByName("car_goods");
    for (var i=0;i<car_goods.length;i++)
        car_goods[i].checked=false;
    all_or_no.checked=false;

    // alert( $("input[name='car_goods']:checked").length);
});
//算出总价格
function total() {
 //   获取所有已选复选框
 var checked= $("input[name='car_goods']:checked")
    var total=0;
    //扫描累加
    for (var i=0;i<checked.length;i++){
        var goods_price=checked[i].getAttribute('goods_price');
        var  total_price=parseInt(goods_price) ;
         total+=total_price;
     }
     //渲染前端
    $("#total").html(total);
}
//复选框
function check_all_no() {
    var all_or_no =document.getElementById("all_or_no");
    var car_goods =document.getElementsByName("car_goods");

    if (all_or_no.checked) {

            for (var i=0;i<car_goods.length;i++)
                car_goods[i].checked=true;
        }
    else
        {
            for (var i = 0; i < car_goods.length; i++)
                car_goods[i].checked= false;
        }

total();
}

购物车实现选中商品算出总价（js）

代码

Guess you like