0
点赞
收藏
分享

微信扫一扫

购物车选中商品总金额变化的实现——ssm项目小结

酷子腿长一米八 2022-03-18 阅读 48

购物车选中商品总金额变化——效果图

全部选中

部分选中

1.实现思路

使用jquery选择器选择input checkbox,并绑定点击事件。每次点击鼠标都触发事件判断是否选中,如果选中,就加上此类商品则总金额;如果不选中,就减去此类商品的总金额。
需要注意的几个点:
1.如何绑定点击事件?

2.如何用选择器选择input CheckBox?

1.2的更多的讨论请移步我的另一篇笔记:https://blog.csdn.net/qq_44398094/article/details/123506102?spm=1001.2014.3001.5502
3.如何获取此类商品总金额?

属性类型描述引用 EL
valueObject将要存储的变量值可以
varString存储变量值的变量名称不可以
targetObject存储变量值或者标签主体的目标对象,可以是JavaBean或Map集合对象可以
propertyString指定目标对象存储数据的属性名可以
scopeString指定变量存在于JSP的范围,默认值是page不可以

4.如何修改页面展示?
$("#totalprice").val(sum+price);

2.部分代码

js

$(".selectid").on("click",function () {
                  var status=$("input:focus").val();//通过鼠标焦点获取当前编号
                  var price=Number(arrprice[status].value);//获取所选商品价格
                  var sum=Number($("#totalprice").val());//获取总价格
                  alert("sum="+sum);
                  if($("input:focus").is(':checked')){//id被选中
                      alert("被选中");
                      $("#totalprice").val(sum+price);

                  }else{
                      alert("不被选中");
                      $("#totalprice").val(sum-price);
                  }
              });

html

<c:set var="totalprice" value="0"></c:set>
<table >
	    	<tr>
				<td class="td1">序号</td>
	    		<td class="td1">选择</td>
	    		<td class="td1">图片</td>
	    		<td class="td1">商品名称</td>
	    		<td class="td1">原价</td>
	    		<td class="td1">数量</td>
				<td class="td1">订购价</td>
	    	</tr>
<c:forEach items="${cartList}" var="cart" varStatus="status">
			<tr>
				<td>${status.index}</td>
				<td><input type="checkbox" name="selectid" class="selectid" id="${cart.flowername}" checked="checked" value="${status.index}"></td>
				<td><img src="images/${cart.flowername}.jpg " width=150 height=150></td>
				<td>${cart.flowername}</td>
				<td>${cart.price}</td>
				<td><span><button value="${status.index}" class="decnum">-</button></span>
					<input type="hidden" name="arrid" value="${cart.id}">
					<input type="hidden" name="arrprice" value="${cart.price*cart.num}">
					<input type="text" value="${cart.num}" name="arrcartnum" class="cartnuminput">
					<span><button  class="addnum" value="${status.index}">+</button></span>
				</td>
				<td>
					<strong><span id="${cart.id}">${cart.price*cart.num}</span></strong>
				</td>
			</tr><%--设置总价--%>
				<c:set var="totalprice" value="${totalprice+cart.price*cart.num}"></c:set>
			</c:forEach>
			<tr>
				<td colspan="5" align="center"><input type="submit" value="去结算" class="input2" id="cartform"></td>
			</tr>
    </table>
    </div>
    <div class="other">
    	<ul>
			应付金额(不含运费):¥<input type="text" id="totalprice" value="${totalprice}" style="border:none firebrick" width="50px" >
   		</ul>
    </div>

欢迎各位小伙伴的批评指正,如果对你有帮助,点个赞再走吧ヾ(◍°∇°◍)ノ゙

举报

相关推荐

0 条评论