ITPub博客

首页 > IT职业 > IT生活 > jquery 订单结算checkbox全选全不选

jquery 订单结算checkbox全选全不选

IT生活 作者:skyweave 时间:2021-09-09 10:01:58 0 删除 编辑

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环境

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/834/viewspace-2815421/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-04-12

  • 博文量
    134
  • 访问量
    896