{__NOLAYOUT__} <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="__STATIC__/index_style/js/jquery-2.2.0.min.js" ></script> </head> <body> <table border="1"> <tr> <th> 全选/全不选<br> <input type="checkbox" id="choose"> </th> <th>商品图片</th> <th>商品名称</th> <th>商品单价</th> <th>商品数量</th> <th>商品小计</th> </tr> {volist name="data" id="v" key="k"} <tr> <td><input type="checkbox" class="cho"></td> <td><img src="__STATIC__/uploads/{$v.goods_img}" width="100" height="100"></td> <td>{$v.goods_name}</td> <td>{$v.goods_price}</td> <td> <button type="button" class="jia">+</button> <span>{$v.num}</span> <button type="button" class="jian">-</button> </td> <td class="count_price">{$v.count_price}</td> </tr> {/volist} </table> 总价：￥<span id="zongjia">0</span> </body> </html> <script> //多选框的点击事件 $('.cho').click(function(){ sum_price(); }) //计算总价 function sum_price(){ var sum=0 var obj = $("input[class=cho]"); for (var i = 0; i < obj.length; i++) { if(obj[i]['checked']){ sum+=Number($(obj[i]).parents("tr").find('.count_price').text()); } } $("#zongjia").text(sum); } //加号事件 $(".jia").click(function(){ //单价 var one_price = Number($(this).parent().prev().text()); //计算数量 var num = Number($(this).next()[0]['textContent']); num = num+1; //数量替换 $(this).next().text(num) //小计 xiaoji = num*one_price; //替换 $(this).parent().next().text(xiaoji) sum_price() }) //减号事件 $(".jian").click(function(){ //单价 var one_price = Number($(this).parent().prev().text()); //计算数量 var num = Number($(this).prev()[0]['textContent']); num = num-1 <= 0 ? 1: num-1; //数量替换 $(this).prev().text(num) //小计 xiaoji = num*one_price; //替换 $(this).parent().next().text(xiaoji) sum_price() }) </script>