模拟购物车，实现全选或者全不选，或者其中任意一件单品单选的效果。
点击顶部复选框实现全选
列表中任意一项未选中，顶部复选框就是未选中的状态
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
#div {
width: 300px;
margin: 100px auto;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 2px solid #ccc;
width: 300px;
}
th,
td {
border: 1px solid #ccc;
color: #000;
padding: 10px;
}
th {
background-color: #09c;
font: bold 18px "幼圆";
color: #ffffff;
}
td {
font: bold 16px "幼圆";
text-align: center;
}
tr {
background-color: rgb(237, 238, 240);
}
tr:hover {
cursor: pointer;
background-color: #fff;
}
body {
background-color: #ccc;
}
</style>
</head>
<body>
<div id="div">
<table>
<caption>
<h2>选择武器</h2>
</caption>
<thead>
<tr>
<th>
<input type="checkbox" id="all" />
</th>
<th>武器</th>
<th>奥义</th>
</tr>
</thead>
<tbody id="content">
<tr>
<td>
<input type="checkbox" />
</td>
<td>铁碎牙</td>
<td>金刚爆流破</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>天生牙</td>
<td>冥道残月破</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>梓山弓矢</td>
<td>破魔净化</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>爆碎牙</td>
<td>苍龙破</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>斗鬼神</td>
<td>爆流破</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>丛云牙</td>
<td>狱龙破</td>
</tr>
</tbody>
</table>
</div>
<!-- <script src="common.js"></script> -->
<script>
function zy$(id) {
return document.getElementById(id)
};
//获取元素
var all = zy$("all");
//获取所有的复选框
var tbodyO = zy$("content").getElementsByTagName("input");
//第一步，tbody中的状态和全选复选框状态一致
//注册点击事件，添加事件处理函数
all.onclick = function () {
for (var i = 0; i < tbodyO.length; i++) {
tbodyO[i].checked = this.checked;
}
};
//第二步，tbody中的复选框状态，影响全选框
//为tbody中所有的复选框注册点击事件
for (var i = 0; i < tbodyO.length; i++) {
tbodyO[i].onclick = function () {
//设置一个变量为判断标识
var flag = true;
//循环遍历
for (var j = 0; j < tbodyO.length; j++) {
//只要存在没被勾选的复选框
if (!tbodyO[j].checked) {
//判断标识为假，不影响全选框
flag = false;
break;
}
}
all.checked = flag;
};
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/yuebanzhou/p/9133195.html
时间： 2024-11-15 00:22:34