jQuery 全选 全部选 反选 实现代码


Posted in Javascript onAugust 17, 2016

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 全选 全部选 反选 实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
关于jquery css的使用介绍
Apr 18 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
微信小程序 地图定位简单实例
Oct 14 Javascript
用js实现博客打赏功能
Oct 24 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
Vue头像处理方案小结
Jul 26 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
AngularJS 自定义指令详解及示例代码
Aug 17 #Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 #Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 #Javascript
深入理解jQuery layui分页控件的使用
Aug 17 #Javascript
AngularJS 作用域详解及示例代码
Aug 17 #Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 #Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 #Javascript
You might like
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
php实现文件下载更能介绍
2012/11/23 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
javascript各种复制代码收集
2008/09/20 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
python实现朴素贝叶斯算法
2018/11/19 Python
一行python实现树形结构的方法
2019/08/09 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
C#笔试题
2015/07/14 面试题
北大青鸟学生求职信
2013/09/24 职场文书
甲方资料员岗位职责
2013/12/13 职场文书