JQuery中checkbox相关内容获取与功能实现

html文件

	 {% for r in ret %}
	<ul class="cart_list_td clearfix">

		<li class="col01"><input type="checkbox" name="select"></li>

		<li class="col02"><img src="images/goods/goods012.jpg"></li>
		<li class="col03">{{r.ingrename}}<br><em>{{r.price}}元/500g</em><br><em hidden="hidden" class="cartid">{{r.cartid}}</em></li>
		<li class="col01">{{r.shopname}}</li>
		<li class="col04">500g</li>
		<li class="col05">{{r.price}}元</li>
			<!-- <li class="col05">3元</li> -->
		<li class="col06">
			<div class="num_add">

				<input style="font-size: 10px;width: 28px;" type="button" class="fr rate_ul_r_jia" value="+"></input>
				<input style="font-size: 10px;width: 40px;" class="rate_ul_r_input" type="text" name="goodmount" id="goodmount" value={{ r.mount }}><span class="rate_ul_r_icon"></span>
				<input style="font-size: 10px;width: 28px;" type="button" class="fl rate_ul_r_jian" value="-"></input>
			</div>
		</li>
		<li class="col07">{{r.totalprice}}元</li>
		<!-- <li class="col07">3元</li> -->
		<li class="col08"><a href="javascript:;">删除</a></li>
	</ul>
	{% endfor %}

	<ul class="settlements">
		<li class="col01"><input type="checkbox" id="selectBtn" ></li>
		<li class="col02">全选</li>
		<li class="col03">合计(不含运费)<span>¥</span><em class="alltotalprice">0.00</em><br>共计<b class="counts">0</b>件商品</li>
		<li class="col04"><a class="checkorder">去结算</a></li>
	</ul>

一、全选与全不选

 $("#selectBtn").click(function () {
               $("input[name='select']").prop("checked",this.checked);
               })

二、选中的checkbox内容&长度

				var chks = $("input[name='select']:checked")
				var len = chks.length

三、checkbox选中行的相关内容

				chks.each(function(i){
					var row = $(this).parents("ul").children(".col07").text();
					tp+=parseFloat(row)
				})
先定位选中checkbox,找到其祖先,再根据祖先找到孩子DOM获取内容
*注:只能一层一层找孩子DOM*
 var cartid = $(this).parents(".cart_list_td").children(".col03").children(".cartid").text()

四、获得的DOM内容进行计算时需要进行字符转换

				var tp = 0
				$("input[name='select']:checked").each(function(i){
					var row = $(this).parents("ul").children(".col07").text();
					tp+=parseFloat(row)
				})

parseFloat() parseInt()

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值