实现全选功能三种方法
来源：互联网 发布：安卓常用的布局优化 编辑：程序博客网 时间：2024/06/08 02:27
实现全选功能三种方法
<html>
<head>
<title>全选效果</title>
<style type="text/css">
.bg{
background-image: url(images/list_bg.gif);
background-repeat: no-repeat;
width: 730px;
}
td{text-align:center;
font-size:13px;
line-height:25px;
}
body{margin:0}
</style>
<script type="text/livescript">
/**
window.onload=function(){
var all=document.getElementById("all");
var product=document.getElementsByName("product");
var span= document.getElementById("span");
all.onclick=function(){
for(var i=0;i<product.length;i++){
if(all.checked){
product[i].checked=true;
span.innerHTML="反选";
}else{
product[i].checked=false;
span.innerHTML="全选";
}
}
}
}
**/
/**
window.onload=function(){
var all=document.getElementById("all");
var product=document.getElementsByName("product");
var span= document.getElementById("span");
all.onclick=function(){
for(var i=0;i<product.length;i++){
product[i].checked=all.checked;
}
}
}
**/
function alls(flag){
var product=document.getElementsByName("product");
for(var i=0;i<product.length;i++){
product[i].checked=flag;
}
}
</script>
</head>
<body><table border="0" cellspacing="0" cellpadding="0" class="bg">
<tr>
<td style="height:40px;"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr style="font-weight:bold;">
<td><input id="all" type="checkbox" value="全选" onClick="alls(this.checked);"/><span id="span">全选</span></td>
<td>商品图片</td>
<td>商品名称/出售者/联系方式</td>
<td>价格</td>
</tr>
<tr>
<td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td>
</tr>
<tr>
<td><input name="product" type="checkbox" value="1" /></td>
<td><img src="images/list0.jpg" alt="alt" /></td>
<td>杜比环绕，家庭影院必备，超真实享受<br />
出售者：ling112233<br />
<img src="images/online_pic.gif" alt="alt" />
<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>
<td>一口价<br />
2833.0 </td>
</tr>
<tr>
<td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td>
</tr>
<tr>
<td><input name="product" type="checkbox" value="2" /></td>
<td><img src="images/list1.jpg" alt="alt" /></td>
<td>NVDIA 9999GT 512MB 256bit极品显卡，不容错过<br />
出售者：aipiaopiao110 <br />
<img src="images/online_pic.gif" alt="alt" />
<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>
<td>一口价<br />
6464.0 </td>
</tr>
<tr>
<td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td>
</tr>
<tr>
<td><input name="product" type="checkbox" value="3" /></td>
<td><img src="images/list2.jpg" alt="alt" /></td>
<td>精品热卖：高清晰，30寸等离子电视<br />
出售者：阳光的挣扎 <br />
<img src="images/online_pic.gif" alt="alt" />
<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>
<td>一口价<br />
18888.0 </td>
</tr>
<tr>
<td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td>
</tr>
<tr>
<td><input name="product" type="checkbox" value="4" /></td>
<td><img src="images/list3.jpg" alt="alt" /></td>
<td>Sony索尼家用最新款笔记本 <br />
出售者：疯狂的镜无<br />
<img src="images/online_pic.gif" alt="alt" />
<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>
<td>一口价<br />
5889.0 </td>
</tr>
<tr>
<td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td>
</tr>
</table>
</body>
</html>
0 0
- 实现全选功能三种方法
- jQuery实现checkbox三种情况的全选功能
- 一个功能的三种实现方法
- 全选功能实现
- 实现AdvancedDataGrid全选功能
- 实现AdvancedDataGrid全选功能
- vim实现全选功能
- checkbox实现全选功能
- jquery实现全选功能
- javaScript实现全选功能
- vim实现全选功能
- 实现全选的功能
- jq实现全选功能
- jquary实现全选功能
- ListView 实现全选功能
- jquery实现全选功能
- JavaScript实现全选功能
- js实现全选功能
- cookies
- lua文件操作详解
- 多层前馈神经网络的后向传播算法推导
- python idle更改样式
- [vijos1139] 小胖办证
- 实现全选功能三种方法
- GMM与K-means的那些事
- HashMap学习（一）
- Activity生命周期个人理解
- Mac Sierra Matlab2016a中文乱码解决
- 绘制幸福笑脸
- 习题七
- 读《魔鬼经济学02》
- 朴素贝叶斯 VS 逻辑回归 区别
