<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>qdabc.cn</title>
<style>
* {
padding: 0;
margin: 0;
}
#_head {
background-color: green;
}
#_head {
text-align: center;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
text-align: center;
}
</style>
</head>
<body>
<div id="wrapbox">
<table>
<thead id="_head">
<tr>
<th>
<input type="checkbox" id="qx">
</th>
<th>菜名</th>
<th>厨师</th>
<th>价格</th>
</tr>
</thead>
<tbody id="_tbody">
<tr>
<td><input type="checkbox"></td>
<td>红烧鱼</td>
<td>张一</td>
<td>18</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>红烧肉</td>
<td>张二</td>
<td>18</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>红烧狮子头</td>
<td>张三</td>
<td>18</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>红烧小青菜</td>
<td>张四</td>
<td>18</td>
</tr>
</tbody>
</table>
</div>
<script>
var qx = document.getElementById('qx');
var tbody = document.getElementById('_tbody')
var inputs = tbody.getElementsByTagName("input");
qx.onclick = function () {
// 点击全选 然后都被勾选上
// 思路1：
// if(this.checked==true){
// for(var i=0; i<inputs.length; i++ ){
// inputs[i].checked=true;
// // console.log( inputs[i])
// }
// }else{
// for(var i=0; i<inputs.length; i++){
// inputs[i].checked= false;
// }
// }
// 思路2：
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i]
input.checked = qx.checked;
}
}
// 点击下面选项都被勾选的的时候 上面自动被被勾选
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.onclick = function () {
// 假设所有的都被选中了
var flag = true;
// // 下面判断下是不是所有的都被选中了
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.checked == false) {
flag = false;
}
if (flag == true) {
qx.checked = true;
}
else {
qx.checked = false;
}
// qx.checked=flag;
}
}
}
</script>
</body>
</html>
欢迎分享本文，转载请保留出处：前端ABC » 点餐选择框
前端ABC