Discuss / JavaScript / jquery 事件 表单 全选/全不选/反选

jquery 事件 表单 全选/全不选/反选

Topic source

SpringShaw

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

            //全选/全不选 checked事件
            selectAll.on('change', function () {
                var checked = $(this).prop("checked"); //当前checked状态

                langs.each(function () {
                    $(this).prop("checked", checked); // 每种语言也checked
                })
                if (checked) { //两个label hide /show
                    selectAllLabel.hide();
                    deselectAllLabel.show();
                } else {
                    deselectAllLabel.hide();
                    selectAllLabel.show();
                }

            });

            function checkStatus() { //检查 是否所有语言都被选中
                var allchecked = langs.toArray().every(function (lan) {
                    //return lan.getAttribute('checked'); // not chrome
                    // return lan.checked;  // chrome ok
                    return $(lan).prop('checked'); //jquery 兼容好了

                })
                if (allchecked) { //所有语言都选中, 代码点击下 select all
                    selectAll.prop('checked', true);
                    selectAllLabel.hide();
                    deselectAllLabel.show();
                } else {
                    selectAll.prop('checked', false);
                    deselectAllLabel.hide();
                    selectAllLabel.show();
                }
            }
            langs.each(function () {
                $(this).on('change', function () { //每个语言都绑定一下
                    checkStatus();
                })
            });

            // 反选 
            invertSelect.click(function () {
                langs.each(function () {
                    $(this).prop("checked", !$(this).prop("checked")); // 代码选中不会触发事件.下面还要手动
                });
                checkStatus();
            })
        })

  • 1

Reply