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 浏览器检测代码精简版
Mar 04 Javascript
一个简单的js动画效果代码
Jul 20 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 Javascript
在Vuex中Mutations修改状态操作
Jul 24 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&amp;mysql(四)
2006/10/09 PHP
PHP 第一节 php简介
2012/04/28 PHP
php面向对象值单例模式
2016/05/03 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
jQuery操作cookie方法实例教程
2014/11/25 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
layui的select联动实现代码
2019/09/28 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
Python实现简单的代理服务器
2015/07/25 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
智乐游戏测试笔试题
2014/05/21 面试题
车间班组长岗位职责
2013/11/13 职场文书
农林环境专业求职信
2014/03/13 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书