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对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
Jun 27 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
May 14 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 Javascript
解决vuecli3中img src 的引入问题
Aug 04 Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 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
多文件上传的例子
2006/10/09 PHP
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
Javascript中arguments用法实例分析
2015/06/13 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
python之文件读取一行一行的方法
2018/07/12 Python
对python Tkinter Text的用法详解
2018/10/11 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
Django如何使用redis作为缓存
2020/05/21 Python
如何基于Python按行合并两个txt
2020/11/03 Python
Python类型转换的魔术方法详解
2020/12/23 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
《陶罐和铁罐》教学反思
2014/02/19 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
Consul在linux环境的集群部署
2022/04/08 Servers
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android