SOHO树叶
2016-11-01 15:11:20浏览 10498
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>全选框</title>
<style>
a{text-decoration: none;}
</style>
</head>
<body>
<form>
<table cellpadding="5px" cellspacing="0px" align="center">
<!--表头分类部分-->
<tr valign="bottom">
<th><input type="checkbox" name="cb" onclick="qx()"/>全选</th>
<th>商品图片</th>
<th>商品名称/出售者/联系方式</th>
<th>价格</th>
</tr>
<!--内容商品第一行-->
<tr>
<td colspan="4" ></td>
</tr>
<tr>
<td><input type="checkbox" name="cb" onclick="cx()"/></td>
<td><img src="images/list0.jpg"/></td>
<td>
<table cellpadding="5px" align="center">
<tr>
<td colspan="2" align="center">杜比环绕，家庭影院必备，超真实享受</td>
</tr>
<tr>
<td colspan="2" align="center">出售者：ling112233</td>
</tr>
<tr>
<td align="center"><a href="#"><img src="images/online_pic.gif"/></a></td>
<td><a href="#"><img src="images/list_tool_fav1.gif"/>收藏</a></td>
</tr>
</table>
</td>
<td >一口价<br/>2833.0</td>
</tr>
<!--内容商品第二行-->
<tr>
<td colspan="4" ></td>
</tr>
<tr>
<td><input type="checkbox" name="cb" onclick="cx()"/></td>
<td><img src="images/list1.jpg"/></td>
<td>
<table cellpadding="5px" align="center">
<tr>
<td colspan="2" align="center">NVDIA 9999GT 512MB 256bit极品显卡，不容错过</td>
</tr>
<tr>
<td colspan="2" align="center">出售者：aipiaopiao110</td>
</tr>
<tr>
<td align="center"><a href="#"><img src="images/online_pic.gif"/></a></td>
<td><a href="#"><img src="images/list_tool_fav1.gif"/>收藏</a></td>
</tr>
</table>
</td>
<td >一口价<br/>6464.0</td>
</tr>
<!--内容商品第三行-->
<tr>
<td colspan="4" ></td>
</tr>
<tr>
<td><input type="checkbox" name="cb" onclick="cx()"/></td>
<td><img src="images/list2.jpg"/></td>
<td>
<table cellpadding="5px" align="center">
<tr>
<td colspan="2" align="center">精品热卖：高清晰，30寸等离子电视/td>
</tr>
<tr>
<td colspan="2" align="center">出售者：阳光的挣扎</td>
</tr>
<tr>
<td align="center"><a href="#"><img src="images/online_pic.gif"/></a></td>
<td><a href="#"><img src="images/list_tool_fav1.gif"/>收藏</a></td>
</tr>
</table>
</td>
<td >一口价<br/>18888.0</td>
</tr>
<!--内容商品第四行-->
<tr>
<td colspan="4" ></td>
</tr>
<tr>
<td><input type="checkbox" name="cb" onclick="cx()"/></td>
<td><img src="images/list3.jpg"/></td>
<td>
<table cellpadding="5px" align="center">
<tr>
<td colspan="2" align="center">Sony索尼家用最新款笔记本</td>
</tr>
<tr>
<td colspan="2" align="center">出售者：疯狂的镜无</td>
</tr>
<tr>
<td align="center"><a href="#"><img src="images/online_pic.gif"/></a></td>
<td><a href="#"><img src="images/list_tool_fav1.gif"/>收藏</a></td>
</tr>
</table>
</td>
<td >一口价<br/>5889.0</td>
</tr>
</table>
</form>
</body>
<script>
function qx() {
var cb = document.getElementsByName("cb");
for (var i = 0; i < cb.length; i++) {
if (cb[0].checked) {
cb[i + 1].checked = true;
} else {
cb[i + 1].checked = false;
}
}
}
function cx() {
var cb = document.getElementsByName("cb");
for (var i = 0; i < cb.length; i++) {
if (cb[0].checked) {
for (var i = 0; i < cb.length; i++) {
if (cb[i].checked == false) {
cb[0].checked = false;
}
}
} else {
if (cb[i].checked == true && cb[i + 1].checked == true) {
cb[0].checked = true;
}
}
}
}
</script>
</html>
热门评论
-
qq_宏_72017-07-20 0
-
ImagIne112017-01-12 0
-
夏天_1012017-01-11 0
查看全部评论cb[i].checked == true && cb[i + 1].checked == true
有bug
i+1是什么意思？我想学习
功能实现的很好，但布局吧，怎么是用表格啊。