第一种写法:
<!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-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
</head>
<body>
<!-- -->
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll" />
<span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" class="ck" />
</td>
<td>小米手机</td>
<td>小米</td>
<td>¥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" class="ck" />
</td>
<td>小米净水器</td>
<td>小米</td>
<td>¥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" class="ck" />
</td>
<td>小米电视</td>
<td>小米</td>
<td>¥5999</td>
</tr>
</table>
<script>
// change 事件类型
let checkAll = document.querySelector("#checkAll");
// 文字信息提示
let all = document.querySelector(".all");
// 列表中的input
let inputs = document.querySelectorAll(".ck");
// 当表单的选中状态发生改变就会触发事件
// 需求一:上面按钮改变,下面也跟着变动
checkAll.addEventListener("change", function () {
// 事件回调函数中的this指的是事件源
// this -》 checkAll
console.log(this.checked);
// 值为true表明选中了 false表示没有选中
let inputs = document.querySelectorAll(".ck");
// console.log(inputs.length)// 伪数组,伪数组使用的时候需要遍历
if (this.checked) {
// 实现:当全选按钮处于选中状态时,
// 让列表中的linput都选中
for (let i = 0; i < inputs.length; i++) {
inputs[i].checked = true;
}
} else {
// 当全选按钮处于没有选中时,列表中的input都不选中
for (let i = 0; i < inputs.length; i++) {
inputs[i].checked = false;
}
}
// 当全选、全不选的时候变更计算数
// 如果是全选,count为3
// 如果是全不选,count为0
// 此处有优化
if(!this.checked) {
count = 0
} else {
count = 3
}
// 此处用到了三元运算符,用于变更文字
all.innerHTML = this.checked ? "取消" : "全选";
});
// 需求二:下面按钮改变,上面也跟着变动
// 如果列表中的input都是选中的,那么全选对应的input也是选中的
// 如果列表中任意一个input是未选中的,那么全选就是未选中。
// 遍历伪数组
let count = 0;
for (let i = 0; i < inputs.length; i++) {
// 为每一个input添加事件监听
inputs[i].addEventListener("change", function () {
// console.log('测试')
if (this.checked) {
count++;
} else {
count--;
}
// 判断长度来分析是否是全选的
if (count === inputs.length) {
console.log("全部选中了");
checkAll.checked = true;
all.innerHTML = '取消'
} else {
console.log("没有全选");
checkAll.checked = false;
all.innerHTML = '全选'
}
});
}
</script>
</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-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
</head>
<body>
<!-- -->
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll" />
<span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" class="ck" />
</td>
<td>小米手机</td>
<td>小米</td>
<td>¥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" class="ck" />
</td>
<td>小米净水器</td>
<td>小米</td>
<td>¥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" class="ck" />
</td>
<td>小米电视</td>
<td>小米</td>
<td>¥5999</td>
</tr>
</table>
<script>
// change 事件类型
let checkAll = document.querySelector("#checkAll");
// 文字信息提示
let all = document.querySelector(".all");
// 列表中的input
let inputs = document.querySelectorAll(".ck");
// 当表单的选中状态发生改变就会触发事件
// 需求一:上面按钮改变,下面也跟着变动
checkAll.addEventListener("change", function () {
// 事件回调函数中的this指的是事件源
// this -》 checkAll
console.log(this.checked);
// 值为true表明选中了 false表示没有选中
let inputs = document.querySelectorAll(".ck");
// console.log(inputs.length)// 伪数组,伪数组使用的时候需要遍历
for (let i = 0; i < inputs.length; i++) {
inputs[i].checked = this.checked;
}
// 当全选、全不选的时候变更计算数
// 如果是全选,count为3
// 如果是全不选,count为0
// 通过三元来表达
!this.checked ? (count = 0) : (count = 3)
// 此处用到了三元运算符,用于变更文字
all.innerHTML = this.checked ? "取消" : "全选";
});
// 需求二:下面按钮改变,上面也跟着变动
// 如果列表中的input都是选中的,那么全选对应的input也是选中的
// 如果列表中任意一个input是未选中的,那么全选就是未选中。
// 遍历伪数组
let count = 0;
for (let i = 0; i < inputs.length; i++) {
// 为每一个input添加事件监听
inputs[i].addEventListener("change", function () {
// console.log('测试')
// 通过三元优化
this.checked ? count++ : count--
// 判断长度来分析是否是全选的
if (count === inputs.length) {
console.log("全部选中了");
checkAll.checked = true;
all.innerHTML = '取消'
} else {
console.log("没有全选");
checkAll.checked = false;
all.innerHTML = '全选'
}
});
}
</script>
</body>
</html>
案例中用到的知识点
伪数组
伪数组是一种模拟数组,它以像数组一样的方式表示一组值,但是它不是真正的数组。
比如,arguments 对象就是一个前端伪数组,它表示的是函数的参数:
例如:
function myFunc(a, b, c) {
console.log(arguments[0]); // a
console.log(arguments[1]); // b
console.log(arguments[2]); // c
}
myFunc(1, 2, 3);
三元运算符
三元运算符是一种条件运算符,它的格式是:条件表达式 ? 值1 : 值2。
它的作用是把条件表达式的结果作为判断条件:
如果条件表达式的结果为true,则执行值1;
如果条件表达式的结果为false,则执行值2。
案例:
int a=5;int b=10;int c= a>b ? a : b;
这句话的意思是如果a>b为true,则c的值为a,否则c的值为b。