js制作选型全选不全选效果

最新推荐文章于 2022-06-06 09:46:21 发布

智欣悦

最新推荐文章于 2022-06-06 09:46:21 发布

阅读量309

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/zxllynu/article/details/76724294

js 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个简单的全选功能实现方案，通过JavaScript为全选框和商品选择框绑定事件，实现全选与单选状态同步。当点击全选框时，所有商品选择框的状态将与全选框保持一致；反之，当所有商品选择框被选中时，全选框也会自动选中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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/javascript">
window.onload=function(){
var all=document.getElementById("all"); //查找全选标签，
all.onclick=function(){
var products=document.getElementsByName("product");//查找所有name属性为product的标签
for (var i =0;i<products.length;i++) {
products[i].checked=all.checked; //保证所有的product标签的checked属性和all的一致即可
}
};
var products=document.getElementsByName("product");//获取所有name属性为product的标签
for (var i=0;i<products.length;i++) { //遍历所有的product 标签
products[i].onclick=hand;
}
function hand(){ //为每个product标签绑定点击触发事件
var curr=this.checked; //获取当前点击按钮
if (curr==false) { //如果当前的checekbox的checked状态为未选中，则all
all.checked=false; //的选择状态一定是未选中状态，可停止判断，否则，当前
return; //的checkBox 为选中状态
}
for (var j =0;j<i;j++) { //如果当前的checkbox为选中状态，则需要遍历循环其他剩余的
if (products[j].checked==false) { //是否选中，如果未选中，则all一定是未选中状态
all.checked=false; //否则，此时可确定所有checkbox为选中状态
return;
}
}
all.checked=true;
};
}

</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="checkAll();" />全选</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" id="one" /></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" id="two" /></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" id="three" /></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" id="four" /></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>