手写场景 | 手写全选框

Posted on In , Symbols count in article: 4k Reading time ≈ 4 mins.

需求

手写全选框

设置一个全选框和全不选框以及若干个选择框

要求如下：

  1. 选中全选框或者全不选框：其余若干个选择框都要选中或者不选
  2. 选中若干个选择框全部选中/不选时：全选框和全不选框自动选上

知识储备

  1. 选择框：<input type='checkbox'>
  2. 通过.checked属性判断选择框是否被选择，true为选择，false为不选择
  3. 通过控制xxx.checked = true控制选中，同理通过控制xxx.checked = false控制不选中

实现思路

1. 全选框思路

通过监听全选框的click事件，获取全选框的checked的状态，获取到状态之后，则遍历选择框，将选择框的状态设置为和全选框状态一样

2. 全不选框思路

通过监听全不选框的click事件，获取全不选框的checked的状态，获取到状态之后，则遍历选择框，将选择框的状态设置为和全不选框状态相反

3. 选择框思路

通过对每一个选择框增加click事件，获取checked状态为true的选择框的数量，根据不同的情况处理全选框和全不选框

  • 情况1：数量为0 => 设置全不选框checked属性为true，全选框为false
  • 情况2：数量不为0
    • 数量等于选择框数量 => 设置全不选框checked属性为false，全选框为true
    • 数量不等于选择框数量 => 设置全不选框checked属性为false，全选框为false

4. 细节处理

全选和全不选永远是互斥的

所以在对全不选和全选框事件监听的时候，不仅仅要改变选择框的状态，也要改变对方的状态

JS原生实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!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>
  <input type="checkbox" class="checkedAll">全选
  <input type="checkbox" class="unCheckedAll">全不选
  <br/>
  <hr/>
  <input type="checkbox" class="check">选择1
  <br/>
  <input type="checkbox" class="check">选择2
  <br/>
  <input type="checkbox" class="check">选择3
  <br/>
  <input type="checkbox" class="check">选择4
  <br/>
  <input type="checkbox" class="check">选择5
  <br/>
  <input type="checkbox" class="check">选择6
  <script>
    // 获取全选框，全不选框，选择框
    const selectAll = document.querySelector('.checkedAll');
    const unSelectAll = document.querySelector('.unCheckedAll');
    const checks = document.querySelectorAll('.check');


    // 全选方法
    /*
      实现思路：
        通过监听全选框的checked状态，一次遍历选择框，将它们的checked状态设置为和全选框一样的状态
    */
    selectAll.addEventListener('click', function() {
       let selectAllState = selectAll.checked;

       // 细节处理：全选和全不选永远是互斥的
       unSelectAll.checked = !selectAllState;

       // 对选择框进行处理
       checks.forEach((item, index) => {
          item.checked = selectAllState;
       })
    })

    // 全不选方法
    /*
      实现思路：
        与全选框一样，只是状态设置的时候取反即可
    */

    unSelectAll.addEventListener('click', function() {
      let unSelectAllState = unSelectAll.checked;

      // 细节处理：全选和全不选永远是互斥的
      selectAll.checked = !unSelectAllState;

      // 对选择框进行处理 
      checks.forEach((item, index) => {
          item.checked = !unSelectAllState;
       })
    })

    
    // 反选方法
    for (let i = 0; i < checks.length; i++) {
	// 对每一个选择框都要进行监听
      checks[i].addEventListener('click', function() {
	// 统计此时选中选择框的个数
        let checkCount = document.querySelectorAll('.check:checked').length;
        // console.log('checkCount',checkCount);
	// 不同的情况进行判断
        if (checkCount) {
          unSelectAll.checked = false;
          if (checkCount === checks.length) {
            selectAll.checked = true;
          } else {
            selectAll.checked = false;
          } 
        } else {
          selectAll.checked = false;
          unSelectAll.checked = true;
        }
    })
  }
  </script>
</body>
</html>

实现效果

全选 全不选
选择1
选择2
选择3
选择4
选择5
选择6