jQuery实现表单全选、全不选以及反选的功能
2017-06-22 20:07
387 查看
本文主要介绍了利用jQuery实现表单的全选、全不选以及反选的功能。
对如下的form表单:
绑定合适的事件处理函数,实现以下逻辑:
当用户勾上“全选”时,自动选中所有语言,并把“全选”变成“全不选”;
当用户去掉“全不选”时,自动不选中所有语言;
当用户点击“反选”时,自动把所有语言状态反转(选中的变为未选,未选的变为选中);
当用户把所有语言都手动勾上时,“全选”被自动勾上,并变为“全不选”;
当用户手动去掉选中至少一种语言时,“全不选”自动被去掉选中,并变为“全选”。
福利补充:以下是某大神的解决方案,仅供参考。
对如下的form表单:
<!-- 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>
绑定合适的事件处理函数,实现以下逻辑:
当用户勾上“全选”时,自动选中所有语言,并把“全选”变成“全不选”;
当用户去掉“全不选”时,自动不选中所有语言;
当用户点击“反选”时,自动把所有语言状态反转(选中的变为未选,未选的变为选中);
当用户把所有语言都手动勾上时,“全选”被自动勾上,并变为“全不选”;
当用户手动去掉选中至少一种语言时,“全不选”自动被去掉选中,并变为“全选”。
'use strict'; 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()); }); //以下是重点: selectAllLabel.click(function(){//当用户勾上“全选”时,自动选中所有语言,并把“全选”变成“全不选”; langs.prop('checked',true); selectAllLabel.hide(); deselectAllLabel.show(); }); deselectAllLabel.click(function(){//当用户去掉“全不选”时,自动不选中所有语言; langs.prop('checked',false); deselectAllLabel.hide(); selectAllLabel.show(); }); invertSelect.click(function(){//当用户点击“反选”时,自动把所有语言状态反转(选中的变为未选,未选的变为选中); langs.map(function(){ $(this).prop('checked',!$(this).prop('checked')); }); }); langs.map(function(){ $(this).change(function(){//当用户把所有语言都手动勾上时,“全选”被自动勾上,并变为“全不选”; if($('[name=lan b04b g]:checked').length==5){ selectAll.prop('checked',true); selectAllLabel.hide(); deselectAllLabel.show(); }else{//当用户手动去掉选中至少一种语言时,“全不选”自动被去掉选中,并变为“全选”。 selectAll.prop('checked',false); selectAllLabel.show(); deselectAllLabel.hide(); } }); });
福利补充:以下是某大神的解决方案,仅供参考。
function updateLabel() { let allChecked = langs.filter(':checked').length === langs.length selectAll.prop('checked', allChecked) if (allChecked) { selectAllLabel.hide() deselectAllLabel.show() } else { selectAllLabel.show() deselectAllLabel.hide() } } selectAll.change(function(e) { langs.prop('checked', $(this).is(':checked')) updateLabel() }) invertSelect.click(function(e) { langs.click() }) langs.change(() => updateLabel())
相关文章推荐
- 利用jquery实现动态表格的相关操作以及列表全选功能
- js 简单实现表单数据的增添,单项删改,多项删除,修改以及全选功能
- jquery实现全选、全不选以及单选功能
- jquery实现全选、反选以及删除、添加等功能
- GBin1教程:使用jQuery插件jquery.validationEngine实现表单验证功能
- jquery 实现gridview checkbox 全选功能
- checkbox全选/取消全选以及checkbox遍历jQuery实现代码
- jQuery插件Validation验证表单实现javascript表单智能验证功能
- Jquery实现全选反选功能
- 如何在asp.net中用jQuery实现便捷的提示功能和表单验证功能
- jquery实现全选和全不选功能
- Javscript实现表单复选框的全选功能
- jQuery插件Validation验证表单实现javascript表单智能验证功能
- jquery实现(多选框)全选和取消全选功能
- 用Javscript实现表单复选框的全选功能
- 通过jQuery遍历div里面的checkbox,实现全选的功能
- jquery表单ajax提交以及checkbox全选/全不选
- 如何用jquery实现checkbox的全选、反选、取消反选,以及如何得到选中的checkbox的值
- jquery 实现表单验证功能代码(简洁)
- jquery 实现checkbox全选功能,全不选功能.