您的位置:首页 > Web前端 > JQuery

jquery 订单结算checkbox全选全不选以及获得选中的checkbox的值

2014-05-29 17:46 531 查看
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环境
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐