购物车实现勾选框选中再传递值(超简单版)

最新推荐文章于 2023-05-05 00:05:48 发布

qq_41839784

最新推荐文章于 2023-05-05 00:05:48 发布

阅读量2.6k

点赞数 1

本文链接：https://blog.csdn.net/qq_41839784/article/details/89433783

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="checkbox" value="0" name="test">
	<span class="jk">2</span>
	<button class="one">+</button>
	<button class="two">-</button>
	<span class="ni">23</span>
	<input type="checkbox" value="1" name="test" ><span class="jk">3</span><button class="one" >+</button><button class="two" >-</button><span class="ni">34</span>
	<input type="checkbox" value="2" name="test" ><span class="jk">4</span><button class="one" >+</button><button class="two" >-</button><span class="ni">45</span>
	<div id="kk"></div>
	<div id="mm"></div>
</body>
	<script type="text/javascript" src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
            //实现加的点击事件
		$(".one").click(function(){
            //使用index()方法绑定当前元素
			var index = $(".one").index(this);
            //获得当前元素的值
			var num = $(".jk").eq(index).html();
            //强制转化为数字
			num = parseInt(num);
            //加操作
			num += 1;
            //赋值
			$(".jk").eq(index).html(num);
			sumprice()
		});
        //实现减的点击事件(同上)
		$(".two").click(function(){
			var index = $(".two").index(this);
			var num = $(".jk").eq(index).html();
			num = parseInt(num);
			num -= 1;
			if(num < 1){
				num = 1;
			}
			$(".jk").eq(index).html(num);
			sumprice()
		});
        //实现对于总数量的计算
		function sumprice(){
            //声明一个变量用于保存总数量
			var num = 0;
                //使用each()方法遍历所有复选框
				$("input").each(function(){
                    //使用prop()方法判定当前元素是否被选中
					if($(this).prop("checked")){
                    //对于选中的元素的当前数量值相加
						for(var i = 0; i < $(this).length; i++){
							num += parseInt($(this).next(".jk").html());
						}
					}
				})
                //把数量总值传递过去
				$(mm).html(num);
		}

        //使用change事件实现对于商品总数量的一个计算
		$("input").change(function(){
			sumprice()
		})
	</script>
</html>

购物车实现的关键在于点击事件与change事件中对于商品总数量的一个改变

之前作者我一直在一个误区，就是在商品你总数量计算的方法中对于change事件进行一个判断，导致值会出现即时勾选框没勾选中也出现一个累加的效果。所以希望广大看者不要犯这个错误，计算总价就是一个函数，不要添加事件判断，在事件判断中调用计算总数量的方法，最后就能实现效果，我没有做勾选商品总价的的计算，但是道理是一样的，就是在计算总数量的函数中再添加一个计算总价钱的方法即可

qq_41839784

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
购物车实现勾选框选中再传递值(超简单版)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="checkbox" value="0" name="test...
复制链接

扫一扫