Javascript的全选、全不选、反选逻辑实现

发表于 阅读次数：

实现目标

1
2
3
4
5
6
7
8
9
当用户勾上“全选”时，自动选中所有语言，并把“全选”变成“全不选”；

当用户去掉“全不选”时，自动不选中所有语言；

当用户点击“反选”时，自动把所有语言状态反转（选中的变为未选，未选的变为选中）；

当用户把所有语言都手动勾上时，“全选”被自动勾上，并变为“全不选”；

当用户手动去掉选中至少一种语言时，“全不选”自动被去掉选中，并变为“全选”。

代码实现

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<html>
<head>
	<script src="http://code.jquery.com/jquery-3.1.1.js">
	</script>
    <script type="text/javascript">
        'use strict';
        $(function () {
            var
                form = $('#test-form'),
                langs = form.find('[name=lang]'),
                selectAll = form.find('label.selectAll :checkbox'),
                selectAllLabel = form.find('label.selectAll span.selectAll'),
                deselectAllLabel = form.find('label.selectAll span.deselectAll'),
                invertSelect = form.find('a.invertSelect');

            // 重置初始化状态:
            form.find('*').show().off();
            form.find(':checkbox').prop('checked', false).off();
            deselectAllLabel.hide();
            // 拦截form提交事件:
            form.off().submit(function (e) {
                e.preventDefault();
                alert(form.serialize());
            });

            selectAll.on('change', function(e){

                langs.get().map(function(x){$(x).prop('checked', this.checked);});

                if(this.checked){
                    selectAllLabel.hide();
                    deselectAllLabel.show();
                } else {
                    selectAllLabel.show();
                    deselectAllLabel.hide();
                }
            });

            // 校验所有的 input
            function checkAll(){
              // 获取所有input的checked个数
              var count = 0;
              langs.get().map(function(x){
                if($(x).prop('checked')){
                  count = count+1;
                }
              });
              if(count === 0) {
              } else if (count === inputs.length){
                // 当用户把所有语言都手动勾上时，“全选”被自动勾上，并变为“全不选”；
                selectAll.prop('checked', true);

                selectAllLabel.hide();
                deselectAllLabel.show();
              } else {
                // 当用户手动去掉选中至少一种语言时，“全不选”自动被去掉选中，并变为“全选”。
                selectAll.prop('checked', false);

                selectAllLabel.show();
                deselectAllLabel.hide();
              }
            }
            invertSelect.click(function(x){
                langs.get().map(function(x){
                    $(x).prop('checked', !($(x).prop('checked')));
                    checkAll();
                });
            });

            // 设置所有input的监听事件
            var inputs = langs.get();
            inputs.map(function(x){
                $(x).change(function(){
                  checkAll();
                });
            });

        });
    </script>>
</head>

<body>
  Hello, Lou!
  <br/><br/><br/><br/>

 <!-- HTML结构 -->
<form id="test-form" action="test">
    <legend>请选择想要学习的编程语言：</legend>
    <fieldset>
        <p>
        <label class="selectAll">
            <input type="checkbox">
            <span class="selectAll">全选</span>
            <span class="deselectAll">全不选</span>
        </label>
        <a href="#0" class="invertSelect">反选</a>
        </p>
        <p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
        <p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
        <p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
        <p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
        <p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
        <p><button type="submit">Submit</button></p>
    </fieldset>
</form>


</body>

</html>

参考资料