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