Discuss / JavaScript / 觉得写得还行(主要没抄其他同学的哈哈哈哈)

觉得写得还行(主要没抄其他同学的哈哈哈哈)

Topic source

IMDI

#1 Created at ... [Delete] [Delete and Lock User]
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());
        });


        // 1. 全选、全不选
        selectAll.change(function (e) {
            let flag = selectAll.is(':checked');

            // 1.1 全选
            if (flag) {
                selectAllLabel.hide();
                deselectAllLabel.show();
                langs.prop('checked', true);
            }

            // 1.2 全不选
            if (!flag) {
                selectAllLabel.show();
                deselectAllLabel.hide();
                langs.prop('checked', false);
            }
        });

        // 2. 反选
        invertSelect.click(function (e) {
            // 2.1 所有语言复选框取反
            langs.get().forEach(el => {
                $(el).prop('checked', !$(el).is(':checked'));
            });
            // 2.2 检查复选框是否满选
            checkAllOrDeAll();
        });

        // 3. 手动选择
        langs.change(function (e) {
            // 3.1 检查复选框是否满选
            checkAllOrDeAll();
        });

        // 4. 判断是否达到“全选”和“全不选”条件
        function checkAllOrDeAll() {
            let flag = true;

            // 4.1 更新标志(全为true即是满选) 
            langs.get().forEach(el => {
                if (!$(el).is(':checked')) {
                    flag = false;
                }
            });

            // 4.2 满选
            if (flag) {
                selectAllLabel.hide();
                deselectAllLabel.show();
                selectAll.prop('checked', true);
            }

            // 4.3 未满选
            if (!flag) {
                selectAllLabel.show();
                deselectAllLabel.hide();
                selectAll.prop('checked', false);
            }
        }

  • 1

Reply