Effect picture
Interactive description
Note: No server-side logic is involved, only from the perspective of the front-end page, use jQuery to achieve the above interaction
Combined with the above GIF
1. Select all and unselect all, and update the selected quantity and total price at the bottom.
2. Tick the check box of a single product, and simultaneously update the selected quantity and total price at the bottom. If after checking this item, exactly all the check boxes have been deselected, the state of the "select all" check box will be modified synchronously.
3. Update the quantity of an item in the shopping cart through the up and down small arrows, and update the subtotal and total price simultaneously. At the same time realize the maximum and minimum boundary control of the quantity.
4. Monitor the keyup and afterpaste (copy) events of the commodity quantity input box, and replace non-numeric characters with blanks to prevent users from entering illegal characters through the keyboard. At the same time update the subtotal and total price instantly.
Remarks
Now I'll Html code is streamlined and complete jQuery code stickers. When reading Html code, ignore the complicated styles, and only pay attention to the more critical places and their name attributes and id attributes, because these attributes are needed to locate elements in jQuery.
When reading the jQuery code, combined with comments, read the overall implementation logic.
Code
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script type="text/javascript">
$(function() {
// 加载页面后全部勾选
checkAll();
// 监听数量的输入框，绑定输入框的keyup和afterpaste事件
$("input[name='goodsNum']").on("keyup afterpaste", function() {
// 如果输入框输入非数字的字符，立马将该字符替换为空
var corrected = $(this).val().replace(/[^\d]/g, '');
if (corrected == '' || corrected == 0) {
corrected = 1;
}
$(this).val(corrected);
// 更新小计和总价
$goodsItem = $(this).parents(".item-single");
// 单价
var price = parseFloat($goodsItem.find("span[name='price']").text());
// 数量
var num = parseInt($(this).val());
$goodsItem.find("span[name='subtotal']").html((price * num).toFixed(2));
// 如果当前商品勾选了。那么应该也更新总价
if ($goodsItem.find("input[name='checkItem']").prop("checked")) {
calTotalCost();
}
});
});
function checkAll() {
//console.log(allChk);
// jquery-1.4.2 没有prop()方法
// 注意测试，发现1.9.1无法使用attr()操作checked属性
// “全选”这个复选框的状态
var isSelectedAll = $("#cart-selectall").prop("checked");
$items = $("input[name='checkItem']");
// 全部复选框选中
$items.prop("checked", isSelectedAll);
// 更改 已勾选复选框的数量
$("#selectedCount").html(isSelectedAll ? $items.length : 0);
// 重新计算总价
calTotalCost();
}
function checkOne(cur) {
// 标志变量：是否已经全部选中
var isAllSelected = true;
// 当改变当前复选框的状态时，判断是否所有复选框状已经全部选中
// 如果是，改变“全选”这个复选框的状态
$("input[name='checkItem']").each(function() {
if (!$(this).prop("checked")) {
isAllSelected = false;
}
});
$("#cart-selectall").prop("checked", isAllSelected);
$("#selectedCount").html($("input[name='checkItem']:checked").length);
// 重新计算总价
calTotalCost();
}
// 计算勾选商品的总价
function calTotalCost() {
var total = 0;
$("span[name='price']").each(function(index, element) {
// 判断是否勾选
if ($("input[name='checkItem']").eq(index).prop("checked")) {
var price = parseFloat($(this).text()); // 单价，浮点数
// 注意不要用[]来取数组的某个元素，那样取出来是html代码，而并非jquery对象
var num = parseInt($("input[name='goodsNum']").eq(index).val()); // 数量，整数
total += (price * num);
}
});
//console.log(total);
$("#totalCost").html(total);
}
// 加减商品数量
function addNum(obj, step) { // obj：当前对象 step：要加减的值
//console.log(num);
var max = 10; // 最大值
$goodsNum = $(obj).parent(".a-btn").siblings("input[name='goodsNum']");
var cur = parseInt($goodsNum.val()); // 当前的数量
//console.log(cur);
var corrected = 0;
if (step > 0) {
corrected = cur + step > max ? max : (cur + step);
} else {
corrected = cur + step < 1 ? 1 : (cur + step);
}
$goodsNum.val(corrected);
// 更新小计
$goodsItem = $(obj).parents(".item-single");
//console.log($goodsItem);
var price = parseFloat($goodsItem.find("span[name='price']").text());
$goodsItem.find("span[name='subtotal']").html((price * corrected).toFixed(2));
// 如果当前商品勾选了。那么应该也更新总价
if ($goodsItem.find("input[name='checkItem']").prop("checked")) {
calTotalCost();
}
}
</script>
<body class="bg-ligtGary">
<div class="cart-warp">
<div class="cart-filter">
<div class="cart-stepflex">
<div class="cart-step-item curr">
<span>1.我的购物车</span> <i class="iconfont icon-arrow-right-alt"></i>
</div>
<div class="cart-step-item">
<span>2.填写订单信息</span> <i class="iconfont icon-arrow-right-alt"></i>
</div>
<div class="cart-step-item">
<span>3.成功提交订单</span>
</div>
</div>
</div>
<div class="cart-table">
<div class="cart-head">
<div class="column c-checkbox">
<div class="cart-checkbox cart-all-checkbox" ectype="ckList">
<input type="checkbox" id="cart-selectall" checked onChange="checkAll()" class="ui-checkbox checkboxshopAll"
ectype="ckAll" /> <label for="cart-selectall" class="ui-label-14">全选</label>
</div>
</div>
<div class="column c-goods">商品</div>
<div class="column c-props"> </div>
<div class="column c-price">单价（元）</div>
<div class="column c-quantity">数量</div>
<div class="column c-sum">小计</div>
<div class="column c-action">操作</div>
</div>
<div class="cart-tbody" ectype="cartTboy">
<!-- 商品 -->
<div class="cart-item" ectype="shopItem">
<div class="item-list" ectype="itemList">
<!-- 商品1 开始 -->
<div class="item-single">
<div class="item-item selected" ectype="item" id="product_775" data-goodsid="775">
<div class="item-form">
<div class="cell s-checkbox">
<div class="cart-checkbox" ectype="ckList">
<input type="checkbox" id="checkItem_8" value="8" onChange="checkOne(this)" name="checkItem" class="ui-checkbox"
ectype="ckGoods">
<label for="checkItem_8" class="ui-label-14"> </label>
</div>
</div>
<div class="cell s-goods">
<div class="goods-item">
<div class="p-img">
<a href="#" target="_blank"><img src="__index__/img/0_thumb_G_1490169281436.jpg" width="70" height="70"></a>
</div>
<div class="item-msg">
<a href="#" target="_blank">韩都衣舍2017韩版女装春装新款条纹显瘦百搭宽松v领七分袖衬衫潮
领券立减/单件包邮/七天无理由退换</a>
<div class="gds-types"></div>
</div>
</div>
</div>
<div class="cell s-props">
</div>
<div class="cell s-price">
<strong id="goods_price_8"><em>¥</em><span name="price">60.00</span></strong>
</div>
<div class="cell s-quantity">
<div class="amount-warp">
<input type="text" value="1" name="goodsNum" class="text buy-num"
ectype="number" defaultnumber="1">
<div class="a-btn">
<a href="#" onclick="addNum(this, 1)" class="btn-add"><i class="iconfont icon-up"></i></a> <a href="#"
onclick="addNum(this, -1)" class="btn-reduce"><i class="iconfont icon-down"></i></a>
</div>
</div>
<div class="tc ftx-03">有货</div>
</div>
<div class="cell s-sum">
<strong id="goods_subtotal_8">
<font id="_8_subtotal"><em>¥</em><span name="subtotal">60.00</span></font>
</strong>
</div>
<div class="cell s-action">
<a href="#" id="remove_8" ectype="cartOperation" data-value="{"divId":"cart_remove","url":"flow.php?step=drop_goods&id=8","cancelUrl":"flow.php?step=drop_to_collect&id=8","recid":8,"title":"删除"}"
class="cart-remove">删除</a> <a href="#" id="store_8" ectype="cartOperation" data-value="{"divId":"cart_collect","url":"flow.php?step=drop_to_collect&id=8","recid":8,"title":"关注"}"
class="cart-store">收藏</a>
</div>
</div>
</div>
</div>
<!-- 商品1 结束 -->
<!-- 商品2 结束 -->
<div class="item-single">
<div class="item-item selected" ectype="item" id="product_775" data-goodsid="775">
<div class="item-form">
<div class="cell s-checkbox">
<div class="cart-checkbox" ectype="ckList">
<input type="checkbox" id="checkItem_9" value="9" onChange="checkOne(this)" name="checkItem" class="ui-checkbox"
ectype="ckGoods">
<label for="checkItem_9" class="ui-label-14"> </label>
</div>
</div>
<div class="cell s-goods">
<div class="goods-item">
<div class="p-img">
<a href="#" target="_blank"><img src="__index__/img/0_thumb_G_1490169281436.jpg" width="70" height="70"></a>
</div>
<div class="item-msg">
<a href="#" target="_blank">韩都衣舍2017韩版女装春装新款条纹显瘦百搭宽松v领七分袖衬衫潮
领券立减/单件包邮/七天无理由退换</a>
<div class="gds-types"></div>
</div>
</div>
</div>
<div class="cell s-props"> </div>
<div class="cell s-price">
<strong id="goods_price_8"><em>¥</em><span name="price">50.00</span></strong>
</div>
<div class="cell s-quantity">
<div class="amount-warp">
<input type="text" value="1" name="goodsNum" id="goods_number_8"
class="text buy-num" ectype="number" defaultnumber="1">
<div class="a-btn">
<a href="#" onclick="addNum(this, 1)" class="btn-add"><i class="iconfont icon-up"></i></a> <a href="#"
onclick="addNum(this, -1)" class="btn-reduce"><i class="iconfont icon-down"></i></a>
</div>
</div>
<div class="tc ftx-03">有货</div>
</div>
<div class="cell s-sum">
<strong id="goods_subtotal_8">
<font id="_8_subtotal"><em>¥</em><span name="subtotal">50.00</span></font>
</strong>
</div>
<div class="cell s-action">
<a href="#" id="remove_8" ectype="cartOperation" data-value="{"divId":"cart_remove","url":"flow.php?step=drop_goods&id=8","cancelUrl":"flow.php?step=drop_to_collect&id=8","recid":8,"title":"删除"}"
class="cart-remove">删除</a> <a href="#" id="store_8" ectype="cartOperation" data-value="{"divId":"cart_collect","url":"flow.php?step=drop_to_collect&id=8","recid":8,"title":"关注"}"
class="cart-store">收藏</a>
</div>
</div>
</div>
</div>
<!-- 商品2 结束 -->
</div>
</div>
<!-- 商品结束 -->
</div>
<div class="cart-tfoot">
<div class="cart-toolbar">
<div class="w w1200">
<div class="operation">
<a href="#" class="cart-remove-batch" data-dialog="remove_collect_dialog" data-divid="cart-remove-batch"
data-removeurl="ajax_dialog.php?act=delete_cart_goods" data-collecturl="ajax_dialog.php?act=drop_to_collect"
data-title="删除">删除选中的商品</a> <a href="#" class="cart-follow-batch" data-dialog="remove_collect_dialog"
data-divid="cart-collect-batch" data-removeurl="ajax_dialog.php?act=delete_cart_goods" data-collecturl="ajax_dialog.php?act=drop_to_collect"
data-title="关注">移到我的收藏</a>
</div>
<div class="toolbar-right">
<div class="comm-right">
<div class="btn-area">
<form name="formCart" method="post" action="flow.php" onsubmit="return get_toCart();">
<input name="goPay" type="submit" class="submit-btn" value="提交订单" id="go_pay" data-url="flow.php" />
<input name="step" value="checkout" type="hidden" /> <input name="store_seller" value="" type="hidden" id="cart_store_seller" />
<input name="cart_value" id="cart_value" value="" type="hidden" /> <input name="goods_ru" id="goods_ru"
value="" type="hidden" />
</form>
</div>
<div class="price-sum" id="total_desc">
<span class="txt">总价(不含运费)：</span>
<span class="price sumPrice" id="totalCost" ectype="goods_total"></span>
</div>
<div class="reduce-sum">
<span class="txt">已节省：</span> <span class="price totalRePrice" id="save_total_amount" ectype="save_total"></span>
</div>
<div class="amount-sum">
已选择<em class="cart_check_num" ectype="cartNum" id="selectedCount">0</em>件商品
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>