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 相关文章推荐
JavaScript 继承详解(二)
Jul 13 Javascript
学习ExtJS border布局
Oct 08 Javascript
jquery下onpropertychange事件的绑定方法
Aug 01 Javascript
微信小程序 地图定位简单实例
Oct 14 Javascript
jQuery命名空间与闭包用法示例
Jan 12 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
node使用promise替代回调函数
May 07 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
vue日历/日程提醒/html5本地缓存功能
Sep 02 Javascript
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
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
python统计一个文本中重复行数的方法
2014/11/19 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
Python模块WSGI使用详解
2018/02/02 Python
pygame实现简易飞机大战
2018/09/11 Python
更新修改后的Python模块方法
2019/03/03 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
pandas如何处理缺失值
2019/07/31 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
司仪主持词两篇
2014/03/22 职场文书
党员创先争优公开承诺书
2014/03/28 职场文书
经营目标管理责任书
2014/07/25 职场文书
酒店端午节活动方案
2014/08/26 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
python基础之类属性和实例属性
2021/10/24 Python