简单的购物小表格

最新推荐文章于 2024-10-04 06:11:34 发布

美食大战老鼠

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量269

点赞数 2

文章标签： html css html5

本文链接：https://blog.csdn.net/Liu189364/article/details/120536769

版权

html代码：

<table border="" cellspacing="0" cellpadding="1">
			<tr style="background-color: #0099cc;">
				<td><input type="checkbox"class="all"/></td>
				<td style="text-align: center; width: 200px;">商品</td>
				<td style="color: white; width: 70px; height: 30px; text-align: center;">价钱</td>
			</tr>
			<tr class="zuida">
				<td><input type="checkbox" class="lla"/></td>
				<td>苹果</td>
				<td style="text-align: center;" class="zongji">8000</td>
			</tr>
			<tr  class="zuida">
				<td><input type="checkbox" class="lla"/></td>
				<td>香蕉</td>
				<td style="text-align: center;" class="zongji">5000</td>
			</tr>
			<tr  class="zuida">
				<td><input type="checkbox" class="lla"/></td>
				<td>梨子</td>
				<td style="text-align: center;" class="zongji">2000</td>
			</tr>
			<tr  class="zuida">
				<td><input type="checkbox" class="lla"/></td>
				<td>蔬菜</td>
				<td style="text-align: center;" class="zongji">2000</td>
			</tr>
			<tr>
				<td colspan="3">总价是：<span class="zongjia">0</span>元</td>
			</tr>
		</table>

JQ代码：

<script src="jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
					$(".all").change(function(){
						var value=$(this).prop("checked")
						$(".lla").prop("checked",value)
						zongjia()
					})
					$(".lla").click(function(){
						var chang1=$(".lla").length;
						var chang2=$(".lla:checked").length;
						if(chang1===chang2){
							$(".all").prop("checked",true)
						}else{
							$(".all").prop("checked",false)
						}
						zongjia()
					})
					$(".lla").change(function(){
						zongjia()
					})
					function zongjia(){
						var xuan=$(".lla:checked").parents(".zuida");
						var num=0;
						xuan.each(function(index,rom){
							var xuanzhi=$(rom).find(".zongji").text()*1;
							num+=xuanzhi;
						})
						$(".zongjia").text(num);
					}
				})
		</script>

成品图：