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()