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>
			<!-- 
  • 3元
  • -->
    <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> <!--
  • 3元
  • -->
    <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()

    你可能感兴趣的:(JQuery中checkbox相关内容获取与功能实现)