javascript 复选框选择/全选后特效_表单特效

js代码

<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> 
<p class="content"> 
<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><p><input name="delete[1]" value="1" type="checkbox"></p></td> 
<td><a href="/productinfo.php?id=1" title="显示详细信息">高级减肥绿茶</a></td> 
<td class="price"><span class="whl" title="Precio por mayor">$8000</span></td> 
<td><p><input name="quantity[1]" class="quantity" value="20" maxlength="3" type="text"></p></td> 
<td class="stotal">$160000</td> 
</tr> 
<tr> 
<td><p><input name="delete[7]" value="1" type="checkbox"></p></td> 
<td><a href="/productinfo.php?id=7" title="显示详细信息">高级红茶</a></td> 
<td class="price"><span>$8400</span></td> 
<td><p><input name="quantity[7]" class="quantity" value="1" maxlength="3" type="text"></p></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> 
<p id="functions"> 
<input name="update" value="更新" type="submit"><input name="buy" value="完成购物" type="submit"> 
<script type="text/javascript"> 
<!-- 
function init(){ 
  var input = document.cart.getElementsByTagName(&#39;input&#39;); 
  for(var i=0;i<input.length;i++) 
    if(/checkbox/.test(input[i].type)) 
      input[i].onclick=function(){ 
        docheck(this,this.checked); 
      } 
} 
function selectAll(check) { 
  var input = document.cart.getElementsByTagName(&#39;input&#39;); 
  for(var a = 0; a < input.length; a++) { 
    if(input[a].type == &#39;checkbox&#39; && /^delete\[/.test(input[a].name)) 
      docheck(input[a],check); 
  } 
} 
function selectByPrice(whl) { 
  var input = document.cart.getElementsByTagName(&#39;input&#39;); 
  for(var a = 0; a < input.length; a++) 
    if(input[a].type == &#39;text&#39; && /^quantity\[/.test(input[a].name)) 
      docheck(input[a-1],whl && input[a].value >= 20 && whl || !whl && input[a].value<20); 
} 
function docheck(ele,b){ 
  ele.checked=b; 
  while(ele&&ele.tagName!="TR") 
    ele=ele.parentElement; 
  if(!ele) 
    return; 
  ele.className=b?&#39;chk&#39;:&#39;&#39;; 
  ele.getElementsByTagName(&#39;input&#39;)[1].disabled=b; 
} 
init(); 
document.write(&#39;<p>选择: <span onmousedown="selectAll(true)">全部</span>, <span onmousedown="selectAll(false)">无</span>, <span onmousedown="selectByPrice(false)">普通价钱</span>, <span onmousedown="selectByPrice(true)">批发价钱</span></p>&#39;); 
--> 
</script> 
</p> 
</form></p>