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); } }
Sign in to make a reply
IMDI