<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
margin: 200px auto;
width: 300px;
height: 250px;
/* border: 1px solid black ; */
border-collapse: collapse;
}
th,
td {
width: 150px;
height: 50px;
border: 1px solid black;
text-align: center;
}
tbody tr:hover {
background-color: pink;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th><input type="checkbox" id="j_cbAll"></th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td><input type="checkbox"></td>
<td>iPone14</td>
<td>8000</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>ipad Pro</td>
<td>5000</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>iPone13</td>
<td>6000</td>
</tr>
</tbody>
</div>
</table>
<script>
// 1.全选和取消全选
var j_cbAll = document.getElementById('j_cbAll');
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
j_cbAll.onclick = function () {
//不需要这么麻烦的去手动判断修改 下面的小的复选框的值 只要跟上面的保持一致就行了
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked;
}
// if(this.checked='true'){
// for(var i=0;i<j_tbs.length;i++){
// j_tbs[i].checked='true';
// }
// }
// else{
// for(var i=0;i<j_tbs.length;i++){
// j_tbs[i].checked='false';
// }
// }
}
for(var i=0;i<j_tbs.length;i++){
j_tbs[i].οnclick=function(){
var flag=true;
for(var j=0;j<j_tbs.length;j++){
if(!j_tbs[j].checked){
flag=false;
break;
}
}
j_cbAll.checked=flag
}
}
</script>
</body>
</html>
</body>
</html>
240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
