javascript 复选框选择/全选后特效 时间:2020-05-12 人气:0 运行效果 <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> <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="https://m.qb5200.com/productinfo.php?id=1" 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="https://m.qb5200.com/productinfo.php?id=7" 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> <input name="update" value="更新" type="submit"><input name="buy" value="完成购物" type="submit"> <script type="text/javascript"> <!-- function init(){ var input = document.cart.getElementsByTagName('input'); 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('input'); for(var a = 0; a < input.length; a++) { if(input[a].type == 'checkbox' && /^delete\[/.test(input[a].name)) docheck(input[a],check); } } function selectByPrice(whl) { var input = document.cart.getElementsByTagName('input'); for(var a = 0; a < input.length; a++) if(input[a].type == 'text' && /^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?'chk':''; ele.getElementsByTagName('input')[1].disabled=b; } init(); document.write('<p>选择: <span onmousedown="selectAll(true)">全部</span>, <span onmousedown="selectAll(false)">无</span>, <span onmousedown="selectByPrice(false)">普通价钱</span>, <span onmousedown="selectByPrice(true)">批发价钱</span></p>'); --> </script> </div> </form></div> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 加载全部内容