jQuery 全选 全部选 反选 实现代码
更新时间：2016年08月17日 16:57:36 作者：fangfan
上次做了一个前端项目，其中有功能要求实现jquery 全选和反选功能，下面小编抽个时间把实现代码分享到脚本之家平台供大家参考下
1.概述
在项目中经常遇到列表中对复选框进行勾选操作，全选。。。反选。。
2. example
<html>
<body>
<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>
<script src="jquery-3.1.0.js"></script>
<script type="text/javascript">
$(function(){
(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());
});
var count = 1; //点击全选/全不选框次数
selectAll.click(function(){
if(count++ %2){
selectAllLabel.hide();
deselectAllLabel.show();
$(this).prop("checked", false);
langs.prop("checked", true);
}else {
selectAllLabel.show();
deselectAllLabel.hide();
$(this).prop("checked", false);
langs.prop("checked", false);
}
});
invertSelect.on('click', function(){
langs.map(function(){
$(this).prop('checked', !this.checked);
});
});
})();
});
</script>
</body>
</html>
以上所述是小编给大家介绍的jQuery 全选 全部选 反选 实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了JQuery查找DOM节点的方法,实例分析了jQuery选择器实现DOM元素结点与属性结点的查找技巧,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了jquery实现可拖拽弹出层特效,代码非常精简，效果非常棒，这里推荐给有需要的小伙伴2015-01-01
使用jQuery实现很多很有意思的应用效果。我们在很多网站注册会员时，需要填写注册表单，包括登录信息、个人联系信息等，本文将带您一起体验jQuery实现的一个可以滚动的十分友好的分步注册向导，需要的朋友可以参考下2015-08-08
proxy()主要用于在同样的上下文语境中指向另一个对象,下面我们就以实例解析jQuery中proxy()函数的用法,需要的朋友可以参考下2016-05-05
用jquery来判断浏览器类型，如果只是仅仅为了判断浏览器的类型而使用该方法,那么不建议使用，只是在你已经使用了jquery才建议使用，因为没必要因为这么小的一个功能就加载那么大的类库吧2012-11-11
jQuery 技巧，以前发布了很多了，具体的可以参考脚本之家以前发布的文章。2010-04-04
这篇文章主要介绍了JQuery中Text方法用法,实例分析了Text方法设置文本内容的使用方法,非常简单实用,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了jQuery中unwrap()方法用法,实例分析了unwrap()方法的定义、功能及移除匹配元素父元素的使用技巧,需要的朋友可以参考下2015-01-01
jQuery/$ is not defined报错的几种解决方法
jQuery最常见的错误之一是$ is not defined错误,本文主要介绍了jQuery/$ is not defined报错的几种解决方法,具有一定的参考价值,感兴趣的可以了解一下2024-02-02
本文主要介绍了jQuery中的ajaxSubmit方法的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
最新评论