效果图:
,代码实现:
1。多选框代码:
2。结算价格代码:
3。jQuery实现价格计算代码:(当点击多选框时,下面的总计金额会跟随变化)
& lt; #——计算总价年代——比;
& lt; script>
$(函数(){//加载完页面时,计算总计
showTotal ();
$ (' .boxx ')。(“点击”,函数(){//选择多选框后,再重新计算
showTotal ();
}）;
}）;//计算总计
函数showTotal () {
var=0;
var=0;//1。获取所有的被勾选的条目复选框!循环遍历
$ (" .boxx”)。每个(函数(){
var完成=$(这).prop(“检查”);//如果多选框被选中
如果(完成==true) {//2。获取复选框的值,即其他元素的前缀
var id=$ () .val ();//警报(“id”+身份证);//3。再通过前缀找到小计元素,获取其文本
var文本=$(" # " +身份证+“小计”)。text ();//警报(文本);//4。累加计算
+=总数量(文本);
数量+=1;//警报(总);
}
}）;//5。把总计显示在总计元素上
$ (" # txt”)。text(数量);//toFixed(2)函数的作用是把总保留2位
$(" #总额”)。text (total.toFixed (2));//toFixed(2)函数的作用是把总保留2位
}
& lt;/script>
& lt; #——计算总价E——在
4。当点击结算时,使用jQuery传值到后台去进行处理。
& lt; #——结算年代——比;
& lt; script>
函数jiesuan () {//1 .获取所有被选择的条目的id,放到数组中
var cartItemIdArray=new Array ();
$ (" .boxx”)。每个(函数(){
var完成=$(这).prop(“检查”);//如果多选框被选中
如果(完成==true) {
cartItemIdArray.push($(这).val());//把复选框的值添加到数组中
}
}）;//2。把数组的值toString(),然后赋给表单的cartItemIds这个隐藏起来
$ (" # cartItemIds”) .val (cartItemIdArray.toString ());//把总计的值,也保存到表单中
$ (" # hiddenTotal ") .val($(" #总数")。text ());//3。提交这个表单
$ (" # jieSuanForm ")。submit ();
}
& lt;/script>
5。第四步提交的隐藏域表单代码如下:
& lt;形式id=" jieSuanForm " action=爸Ц丁狈椒?皃ost”比;
& lt;输入类型=耙亍眓ame=" cartItemIds " id=" cartItemIds "/比;
& lt;输入类型=耙亍眓ame="总" id=" hiddenTotal "/比;
& lt;输入类型=耙亍眓ame="购物车" value=" https://www.yisu.com/zixun/loadCartItems "/比;
& lt;/form>
6。这个过程并不复杂,之所以写成一篇博客,是因为本人对DOM操作不是很熟悉,导致选取DOM元素时耽误了一些时间,做一次笔记,为下次做类似的问题节约时间。
以上所述是小编给大家介绍的jQuery实现购物车的总价计算和总价传值功能,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
