管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

　　运行效果

　　

<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> 
<div 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><div><input name="delete[1]" value="1" type="checkbox"></div></td> 
<td><a href="/productinfo.php?id=1" _ewebeditor_ta_href="%2Fproductinfo.php%3Fid%3D1" title="显示详细信息">高级减肥绿茶</a></td> 
<td class="price"><span class="whl" title="Precio por mayor">$8000</span></td> 
<td><div><input name="quantity[1]" class="quantity" value="20" maxlength="3" type="text"></div></td> 
<td class="stotal">$160000</td> 
</tr> 
<tr> 
<td><div><input name="delete[7]" value="1" type="checkbox"></div></td> 
<td><a href="/productinfo.php?id=7" _ewebeditor_ta_href="%2Fproductinfo.php%3Fid%3D7" title="显示详细信息">高级红茶</a></td> 
<td class="price"><span>$8400</span></td> 
<td><div><input name="quantity[7]" class="quantity" value="1" maxlength="3" type="text"></div></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> 
<div id="functions"> 
<input name="update" value="更新" type="submit"><input name="buy" value="完成购物" type="submit"> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%3C!--%20%0D%0Afunction%20init()%7B%20%0D%0A%20%20var%20input%20%3D%20document.cart.getElementsByTagName('input')%3B%20%0D%0A%20%20for(var%20i%3D0%3Bi%3Cinput.length%3Bi%2B%2B)%20%0D%0A%20%20%20%20if(%2Fcheckbox%2F.test(input%5Bi%5D.type))%20%0D%0A%20%20%20%20%20%20input%5Bi%5D.onclick%3Dfunction()%7B%20%0D%0A%20%20%20%20%20%20%20%20docheck(this%2Cthis.checked)%3B%20%0D%0A%20%20%20%20%20%20%7D%20%0D%0A%7D%20%0D%0Afunction%20selectAll(check)%20%7B%20%0D%0A%20%20var%20input%20%3D%20document.cart.getElementsByTagName('input')%3B%20%0D%0A%20%20for(var%20a%20%3D%200%3B%20a%20%3C%20input.length%3B%20a%2B%2B)%20%7B%20%0D%0A%20%20%20%20if(input%5Ba%5D.type%20%3D%3D%20'checkbox'%20%26%26%20%2F%5Edelete%5C%5B%2F.test(input%5Ba%5D.name))%20%0D%0A%20%20%20%20%20%20docheck(input%5Ba%5D%2Ccheck)%3B%20%0D%0A%20%20%7D%20%0D%0A%7D%20%0D%0Afunction%20selectByPrice(whl)%20%7B%20%0D%0A%20%20var%20input%20%3D%20document.cart.getElementsByTagName('input')%3B%20%0D%0A%20%20for(var%20a%20%3D%200%3B%20a%20%3C%20input.length%3B%20a%2B%2B)%20%0D%0A%20%20%20%20if(input%5Ba%5D.type%20%3D%3D%20'text'%20%26%26%20%2F%5Equantity%5C%5B%2F.test(input%5Ba%5D.name))%20%0D%0A%20%20%20%20%20%20docheck(input%5Ba-1%5D%2Cwhl%20%26%26%20input%5Ba%5D.value%20%3E%3D%2020%20%26%26%20whl%20%7C%7C%20!whl%20%26%26%20input%5Ba%5D.value%3C20)%3B%20%0D%0A%7D%20%0D%0Afunction%20docheck(ele%2Cb)%7B%20%0D%0A%20%20ele.checked%3Db%3B%20%0D%0A%20%20while(ele%26%26ele.tagName!%3D%22TR%22)%20%0D%0A%20%20%20%20ele%3Dele.parentElement%3B%20%0D%0A%20%20if(!ele)%20%0D%0A%20%20%20%20return%3B%20%0D%0A%20%20ele.className%3Db%3F'chk'%3A''%3B%20%0D%0A%20%20ele.getElementsByTagName('input')%5B1%5D.disabled%3Db%3B%20%0D%0A%7D%20%0D%0Ainit()%3B%20%0D%0Adocument.write('%3Cp%3E%E9%80%89%E6%8B%A9%3A%20%3Cspan%20onmousedown%3D%22selectAll(true)%22%3E%E5%85%A8%E9%83%A8%3C%2Fspan%3E%2C%20%3Cspan%20onmousedown%3D%22selectAll(false)%22%3E%E6%97%A0%3C%2Fspan%3E%2C%20%3Cspan%20onmousedown%3D%22selectByPrice(false)%22%3E%E6%99%AE%E9%80%9A%E4%BB%B7%E9%92%B1%3C%2Fspan%3E%2C%20%3Cspan%20onmousedown%3D%22selectByPrice(true)%22%3E%E6%89%B9%E5%8F%91%E4%BB%B7%E9%92%B1%3C%2Fspan%3E%3C%2Fp%3E')%3B%20%0D%0A--%3E%20%0D%0A%3C%2Fscript%3E"> 
</div> 
</form></div>

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

教程首页更多教程