html
<table id="order-table">
<tr>
<th>全选<input class="ck_boxall" type="checkbox" value="all" /></th>
<th>商品名称</th>
<th>数量</th>
<th>X</th>
<th>单价</th>
<th>=</th>
<th style="text-align: right;">总计</th>
</tr>
<tr class="odd">
<td ><input name="check_food" class="ck_box" type="checkbox" value="3" /></td>
<td >衣服</td>
<td >
<input type="text" value="1" ></input>
</td>
<td >X</td>
<td >$<span>3</span></td>
<td >=</td>
<td >
<input type="text" value="3" disabled="disabled"></input>
</td>
</tr>
<tr class="even">
<td ><input name="check_food" class="ck_box" type="checkbox" value="6" /></td>
<td >鞋子</td>
<td >
<input type="text" value="1" ></input>
</td>
<td >X</td>
<td >$<span>6</span></td>
<td >=</td>
<td >
<input type="text" value="6" disabled="disabled"></input>
</td>
</tr>
<tr class="odd">
<td ><input name="check_food" class="ck_box" type="checkbox" value="9" /></td>
<td >袜子</td>
<td >
<input type="text" value="1" ></input>
</td>
<td >X</td>
<td >$<span>9</span></td>
<td >=</td>
<td >
<input type="text" value="9" disabled="disabled"></input>
</td>
</tr>
</table>
<div class="clear"></div>
<div>
<span>订单总额: </span>
<input type="text" class="total-box" disabled="disabled"></input>
<br />
<input type="submit" value="提交结账" class="submit" />
</div>
jqurey
///全选与全不选 $(function() { var str=$(".ck_box"); var ck_all=$(".ck_boxall") var min_total=$(".total-box"); var $check_food = $("input[name='check_food']"); var chestr=0; var objarray=str.length; ///单个选中 $(".ck_box").click(function() { chestr=0; for (var i=0;i<objarray;i++){ if(str[i].checked == true){ chestr+=parseInt(str[i].value); } } if(chestr !== 0){ min_total.val(chestr); }else{ chestr=0; min_total.val(0); } }); ///全选与全不选 $(".ck_boxall").click(function() { $('input[name="check_food"]').attr("checked",this.checked); if( ck_all.is(":checked")){ chestr=0; for (var i=0;i<objarray;i++){ chestr+=parseInt(str[i].value); } }else{ chestr=0; } min_total.val(chestr); }); ///单个选中所有时全选被选中 $check_food.click(function(){ $(".ck_boxall").attr("checked",$check_food.length == $("input[name='check_food']:checked").length ? true : false); }); });
结束 记得引入jquery环境
转载于:https://blog.51cto.com/xhtml/1419409