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环境
相关文章推荐
- jq实现checkbox全选中以及获得选中的checkbox的值
- jquery checkbox选中状态以及实现全选反选
- (转载)jquery实现全选、反选、获得所有选中的checkbox
- jq实现checkbox全选中以及获得选中的checkbox的值
- jquery checkbox 复选框多次点击判断选中状态,以及全选/取消的代码示例
- jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox
- jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox
- jquery .prop()的相关操作——全选、反选、获得所有选中的checkbox
- jquery实现全选、反选、获得所有选中的checkbox
- jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox
- 如何用jquery实现checkbox的全选、反选、取消反选,以及如何得到选中的checkbox的值
- jquery实现checkbox全选,选择性勾选,以及table中点击tr中任意一行实现选中或不选中
- JQuery 判断checkbox是否选中,checkbox全选反选,以及执行click事件
- jq实现checkbox全选中以及获得选中的checkbox的值
- jquery实现全选、反选、获得所有选中的checkbox
- jQuery实现CheckBox全选、全不选以及获取选中的值
- jquery实现全选、反 c80f 选、获得所有选中的checkbox (记录专用
- jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox
- jquery实现全选、反选、获得所有选中的checkbox
- jquery设置和获得checkbox选中问题