当前位置：Gxlcms > JavaScript > javascript 复选框选择/全选后特效

javascript 复选框选择/全选后特效

时间：2021-07-01 10:21:17 帮助过：6人阅读

运行效果

<style type="text/css"> 
@charset "utf-8"; 
.content form { 
margin:0; 
} 
table { 
border:1px solid #CCC; 
background:#E4E4E4; 
} 
td { 
border-top:1px solid #CCC; 
background:#FFF; 
font-size:12px; 
} 
th,td,.quantity { 
text-align:center; 
font-family:Arial, Helvetica, sans-serif; 
} 
.price { 
width:11%; 
text-align:right; 
} 
.whl {color:#090;cursor:help} 
.stotal { 
text-align:right; 
width:15%; 
} 
.quantity { 
border:none; 
width:66px; 
height:16px; 
} 
#productrow {width:49%} 
#totalRow th { 
text-align:right; 
} 
#quantityrow {width:13%;} 
#functions {border-top:1px solid #999;padding-top:10px} 
#functions p {margin-top:10px} 
#functions span {color:#00F;margin:0 2px;cursor:pointer} 
#functions input { 
border:1px solid #666; 
border-top:1px solid #FFF; 
border-left:1px solid #FFF; 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
height:20px; 
margin:0 2px; 
} 
.chk *{ 
  background-color:#eeeeee; 
} 
</style> 
 
<form name="cart" action="/update.php" method="post"> 
<table border="0" width="100%"> 
<tbody><tr> 
<th scope="col">删除</th> 
<th scope="col" id="productrow">商品</th> 
<th scope="col">价钱</th> 
<th scope="col" id="quantityrow">数量</th> 
<th scope="col">总共</th> 
</tr> 
<tr> 
<td><input name="delete[1]" value="1" type="checkbox"></td> 
<td>高级减肥绿茶</td> 
<td class="price"><span class="whl" title="Precio por mayor">$8000</span></td> 
<td><input name="quantity[1]" class="quantity" value="20" maxlength="3" type="text"></td> 
<td class="stotal">$160000</td> 
</tr> 
<tr> 
<td><input name="delete[7]" value="1" type="checkbox"></td> 
<td>高级红茶</td> 
<td class="price"><span>$8400</span></td> 
<td><input name="quantity[7]" class="quantity" value="1" maxlength="3" type="text"></td> 
<td class="stotal">$8400</td> 
</tr> 
<tr id="totalRow"> 
<th colspan="3">总共:</th> 
<td>21</td> 
<td class="stotal">$168400</td> 
</tr> 
</tbody></table> 
 
<input name="update" value="更新" type="submit"><input name="buy" value="完成购物" type="submit"> 
<script type="text/javascript"> 
 
</script> 
 
</form>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

人气教程排行