前言：
此时大家对“jquery购物车总计代码”大概比较注重，大家都需要学习一些“jquery购物车总计代码”的相关文章。那么小编也在网上汇集了一些有关“jquery购物车总计代码””的相关内容，希望我们能喜欢，兄弟们快快来学习一下吧！Html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <script src="js/jquery-3.4.1.min.js"></script> <link rel="stylesheet" href="bootstrap-3.4.1/css/bootstrap.min.css"> <script src="js/jquery_shopping.js"></script></head><body> <div class="panel-group"> <div class="panel panel-primary"> <table class="table table-bordered table-striped table-hover table-condensed" id="tab_s"> <thead> <tr class="info"> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody id="tby"> <tr> <td>电脑</td> <td class="price">￥3999.00</td> <td> <div class="row"> <div class="col-md-1"> <button type="button" class="btn btn-default btn-sm" name="sub"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button> </div> <div class="col-md-1"> <input class="form-control input-sm" type="text" name="num" value="1" placeholder="请输入数量"> </div> <div class="col-md-1"> <button type="button" class="btn btn-default btn-sm" name="add"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button> </div> </div> </td> <td class="small_total">￥3999.00</td> <td> <button type="button" class="btn btn-default btn-sm" name="delete"> <span class="glyphicon glyphicon-remove"> 删除</span> </button> </td> </tr> <tr> <td>手机</td> <td class="price">￥1998.00</td> <td> <div class="row"> <div class="col-md-1"> <button type="button" class="btn btn-default btn-sm" name="sub"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button> </div> <div class="col-md-1"> <input class="form-control input-sm" type="text" name="num" value="1" placeholder="请输入数量"> </div> <div class="col-md-1"> <button type="button" class="btn btn-default btn-sm" name="add"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button> </div> </div> </td> <td class="small_total">￥1998.00</td> <td> <button type="button" class="btn btn-default btn-sm" name="delete"> <span class="glyphicon glyphicon-remove"> 删除</span> </button> </td> </tr> <tr> <td>空调</td> <td class="price">￥2099.00</td> <td> <div class="row"> <div class="col-md-1"> <button type="button" class="btn btn-default btn-sm" name="sub"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button> </div> <div class="col-md-1"> <input class="form-control input-sm" type="text" name="num" value="1" placeholder="请输入数量"> </div> <div class="col-md-1"> <button type="button" class="btn btn-default btn-sm" name="add"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button> </div> </div> </td> <td class="small_total">￥2099.00</td> <td> <button type="button" class="btn btn-default btn-sm" name="delete"> <span class="glyphicon glyphicon-remove"> 删除</span> </button> </td> </tr> </tbody> </table> <div class="panel-footer"> <span>已选<span style="color: red;" class="num_sum">1</span>件商品</span> <span>总计:</span> <span class="sum" style="color: red;">0</span> <div> <button type="button" class="btn btn-default btn-sm" name="delSome"> 删除选中商品 </button> <button type="button" class="btn btn-default btn-sm" name="delAll"> 清空购物车 </button> </div> </div> </div> </div></body></html>
Js代码：
$(function(){ function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th><input type="checkbox" id="checkAll" name="checkAll" /></th>'); /*将全选/反选复选框添加到表头最前，即增加一列*/ $thr.prepend($checkAllTh); var $checkAll = $thr.find('input'); $checkAll.click(function(event){ /*将所有行的选中状态设成全选框的选中状态*/ $tbr.find('input').prop('checked',$(this).prop('checked')); /*并调整所有选中行的CSS样式*/ if ($(this).prop('checked')) { $tbr.find('input').parent().parent().addClass('warning'); } else{ $tbr.find('input').parent().parent().removeClass('warning'); } getSum(); /*阻止向上冒泡，以防再次触发点击操作*/ event.stopPropagation(); }); /*点击全选框所在单元格时也触发全选框的点击操作*/ $checkAllTh.click(function(){ $(this).find('input:[type="checkbox"]').click(); }); var $tbr = $('table tbody tr'); var $checkItemTd = $('<td><input type="checkbox" name="checkItem" class="chk_itm"/></td>'); /*每一行都在最前面插入一个选中复选框的单元格*/ $tbr.prepend($checkItemTd); /*点击每一行的选中复选框时*/ /* $tbr.find('input').click(function(event){ //调整选中行的CSS样式 $(this).parent().parent().toggleClass('warning'); //如果已经被选中行的行数等于表格的数据行数，将全选框设为选中状态，否则设为未选中状态 $checkAll.prop('checked',$tbr.find('input:checked').length == $tbr.length ? true : false); //阻止向上冒泡，以防再次触发点击操作 event.stopPropagation(); }); //点击每一行时也触发该行的选中操作 $tbr.click(function(){ $(this).find('input').click(); }); */ } initTableCheckbox(); getSum(); $(".chk_itm").change(function() { getSum(); }); //添加商品 $("button[name='add']").click(function() { let n = parseInt($(this).parent().siblings().find("input[name='num']").val()); console.log("添加商品的num:"+n); n++; $(this).parent().siblings().find("input[name='num']").val(n); let price = $(this).parent().parent().parent().siblings(".price").html(); price = price.substr(1); console.log("添加商品的price:"+price); $(this).parent().parent().parent().siblings(".small_total").text("￥" + (n * price).toFixed(2)); getSum(); }); //减少商品 $("button[name='sub']").click(function() { let n = parseInt($(this).parent().siblings().find("input[name='num']").val()); console.log("减少商品的num:"+n); if (n === 1) { return false; } n--; $(this).parent().siblings().find("input[name='num']").val(n); let price = $(this).parent().parent().parent().siblings(".price").html(); price = price.substr(1); console.log("减少商品的price:"+price); $(this).parent().parent().parent().siblings(".small_total").text("￥" + (n * price).toFixed(2)); getSum(); }); $("input[name='num']").change(function() { let n = $(this).val(); console.log("数量num:"+n); let price = $(this).parent().parent().parent().siblings(".price").html(); price = price.substr(1); console.log("价格price:"+price); $(this).parent().parent().parent().siblings(".small_total").text("￥" + (n * price).toFixed(2)); getSum(); }); function getSum() { let count = 0; //计算总件数 let money = 0; //计算总价钱 $("input[name='num']").each(function(index) { if ($(".chk_itm").eq(index).prop("checked") == true) { count += parseInt($("input[name='num']").eq(index).val()); money += parseFloat($(".small_total").eq(index).text().substr(1)); } }); $(".num_sum").html(count); $(".sum").html(money.toFixed(2)); } //点击删除之后一定是删除当前的商品，获取this $("button[name='delete']").click(function() { //删除的是当前的商品 $(this).parent().parent().remove(); $(".chk_itm").change(); getSum(); clearCheckAll(); }); //删除选定的商品:小的复选框如果选中就删除对应的商品 //删除的是选中的商品 $("button[name='delSome']").click(function() { //删除的是选中的商品 $(".chk_itm:checked").parent().parent().remove(); getSum(); clearCheckAll(); }); //清空购物车 $("button[name='delAll']").click(function() { $("#tby").empty(); getSum(); clearCheckAll(); }); function clearCheckAll() { if ($("#tby").innerText == '') { $(".checkAll").prop("checked", false); } }});效果
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #jquery购物车总计代码 #jqfind
