第一种代码(能执行的)
<!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>
* {
margin: 0;
padding: 0;
}
table {
border: 1px solid;
border-collapse: collapse;
}
td {
border: 1px solid;
}
.choose,
.chooser {
width: 30px;
}
#productInformation {
height: 40px;
text-align: center;
font-size: 18px;
background-color: skyblue;
}
#product {
background-color: beige;
}
</style>
</head>
<body>
<table align="center" id="product">
<tr id="productInformation">
<td class="choose">
<label id='mainChooser'>
<input type="checkbox" class="button">
</label>
</td>
<td>商品</td>
<td>价钱</td>
</tr>
<tr>
<td class="choose">
<label >
<input type="checkbox" class="chooser">
</label>
</td>
<td>apple</td>
<td>X1</td>
</tr>
<tr>
<td class="choose">
<label >
<input type="checkbox" class="chooser">
</label>
</td>
<td>banana</td>
<td>X2</td>
</tr>
<tr>
<td class="choose">
<label >
<input type="checkbox" class="chooser">
</label>
</td>
<td>watermelon</td>
<td>X3</td>
</tr>
<tr>
<td class="choose">
<label >
<input type="checkbox" class="chooser">
</label>
</td>
<td>grape</td>
<td>X4</td>
</tr>
<script>
var chooses = document.getElementsByClassName('chooser');
var mainChoose = document.getElementById('mainChooser');
var button=document.getElementsByClassName('button')
mainChoose.onclick = function () {
if (button[0].checked==true) {
for (let index = 0; index < chooses.length; index++) {
chooses[index].checked = true;
}
} else if (button[0].checked==false) {
for (let index = 0; index < chooses.length; index++) {
chooses[index].checked = false;
}
}
}
</script>
</table>
</body>
</html>
而第二种代码会有这样的问题(红圈里面应该是对勾)实际测试的时候点击全选框会出现相反的结果
这是第二种代码(有问题的)
<!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>
* {
margin: 0;
padding: 0;
}
table {
border: 1px solid;
border-collapse: collapse;
}
td {
border: 1px solid;
}
.choose,
.chooser {
width: 30px;
}
#productInformation {
height: 40px;
text-align: center;
font-size: 18px;
background-color: skyblue;
}
#product {
background-color: beige;
}
</style>
</head>
<body>
<table align="center" id="product">
<tr id="productInformation">
<td class="choose">
<label id='mainchooser'>
<input type="checkbox">
</label>
</td>
<td>商品</td>
<td>价钱</td>
</tr>
<tr>
<td class="choose">
<label >
<input type="checkbox" class="chooser">
</label>
</td>
<td>apple</td>
<td>X1</td>
</tr>
<tr>
<td class="choose">
<label >
<input type="checkbox" class="chooser">
</label>
</td>
<td>banana</td>
<td>X2</td>
</tr>
<tr>
<td class="choose">
<label >
<input type="checkbox" class="chooser">
</label>
</td>
<td>watermelon</td>
<td>X3</td>
</tr>
<tr>
<td class="choose">
<label >
<input type="checkbox" class="chooser">
</label>
</td>
<td>grape</td>
<td>X4</td>
</tr>
<script>
var chooses = document.getElementsByClassName('chooser');
var mainchoose = document.getElementById('mainchooser');
var k = 'appear';
mainchoose.onclick = function () {
console.log(k);//为什么有时会输出两个值?
if (k=='appear') {
for (let index = 0; index < chooses.length; index++) {
chooses[index].checked = true;
}
k='disappear'
} else if (k='disappear') {
for (let index = 0; index < chooses.length; index++) {
chooses[index].checked = false;
}
k='appear'
}
}
</script>
</table>
</body>
</html>