页面导航：首页 → 网络编程 → JavaScript → 表单特效 → 正文内容

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

发布：dxy 字体：[增加减小] 类型：转载

运行效果

点击运行可以看到效果:

<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" 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" 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"> 
<script type="text/javascript"> 
 
</script> 
</div> 
</form></div>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

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

百度中搜索更多的关于javascript 复选框选择/全选后特效内容，或者用Google搜索相关更多

浏览次数：载入中... 打印本文关闭本文返回首页

0

上一篇文章：一个即时表单验证的javascript代码
下一篇文章：javascript+css好多网站用的选星星实现打分功能的函数

文章评论

共有位脚本之家网友发表了评论我来说两句

同类文章

最近更新

热点排行