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

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

1.实现思路

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

此类问题涉及动态标签事件的绑定
因为购物车内的商品是list类型的数组，在前端html显示时使用<c:forEach动态加载到页面中，所以在我编写代码时，用$("#id").click(function(){...});是没有用的，我是使用了$(".class").on("click",function () {...});才绑定成功。

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

我的初步设想是把<input 的id设置成id="${cart.flowername} ，在js里用独一无二的id去获取此标签$("#${cart.flowername})的一系列操作（参考了），但是不知道为什么，通过此种方式我获取失败，总是返回一个空字符串。如果有知道的小伙伴欢迎在评论区讨论。
后来我采用了jquery的基本过滤选择器$(input:focus)返回当前获取焦点的input

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

使用<c:set设置了一个变量用来存放总金额

属性	类型	描述	引用 EL
value	Object	将要存储的变量值	可以
–	–	–	–
var	String	存储变量值的变量名称	不可以
–	–	–	–
target	Object	存储变量值或者标签主体的目标对象，可以是JavaBean或Map集合对象	可以
–	–	–	–
property	String	指定目标对象存储数据的属性名	可以
–	–	–	–
scope	String	指定变量存在于JSP的范围，默认值是page	不可以

4.如何修改页面展示？
$("#totalprice").val(sum+price);
说明：
此处获取选中商品的总金额，还是采用通过name获取标签数组，再用下标获取单个标签的方式，见1，2。

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>

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