学习来源:https://www.bilibili.com/video/BV1HJ41147DG
要求
1、点击上面全选复选框,下面所有的复选框都选中(全选)
2、再次点击全选复选框,下面所有的复选框都不选中(取消全选)
3、如果下面复选框全部选中,上面全选按钮就自动选中
4、如果下面复选框有一个没有选中,上面全选按钮就不选中
5、所有复选框一开始默认都没选中状态
思路
1、全选和取消全选做法:让下面所有复选框的checked属性(选中状态)跟随全选按钮即可
2、下面复选框需要全部选中,上面全选才能选中做法::给下面所有复选框绑定点击事件,每次点击,都要循环查看下面所有的复选框是否有没选中的,如果有一个没选中的, 上面全选就不选中。
3、可以设置一个变量来控制全选是否选中
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border: 1px solid #e7e7e7;
border-right: none;
border-collapse: collapse;
}
th