Imagen de efecto
Descripción interactiva
Nota: No hay lógica del lado del servidor involucrada, solo desde la perspectiva de la página frontal, use jQuery para lograr la interacción anterior
Combinado con el GIF anterior
1. Seleccione todo y deseleccione todo, y actualice la cantidad seleccionada y el precio total en la parte inferior.
2. Marque la casilla de verificación de un solo producto y actualice simultáneamente la cantidad seleccionada y el precio total en la parte inferior. Si después de marcar este elemento, se han deseleccionado exactamente todas las casillas de verificación, el estado de la casilla de verificación "seleccionar todo" se modificará sincrónicamente.
3. Actualice la cantidad de un artículo en el carrito de compras a través de las flechas pequeñas hacia arriba y hacia abajo, y actualice el subtotal y el precio total simultáneamente. Al mismo tiempo, realice el control de límite máximo y mínimo de la cantidad.
4. Supervise los eventos de activación y posterior pegado (copia) del cuadro de entrada de cantidad de producto y reemplace los caracteres no numéricos con espacios en blanco para evitar que los usuarios ingresen caracteres ilegales a través del teclado. Al mismo tiempo, actualice el precio total y subtotal al instante.
Observaciones
Ahora, el código Html está optimizado y completo con pegatinas de código jQuery . Cuando lea código HTML, ignore los estilos complicados y solo preste atención a los lugares más críticos y sus atributos de nombre y atributos de identificación, porque estos atributos son necesarios para ubicar elementos en jQuery.
Al leer el código jQuery, combinado con comentarios, lea la lógica de implementación general.
Código
<!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>