jQuery实现复选框全选/取消全选/反选及获得选择的值


Posted in Javascript onJune 12, 2014
<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
// 全选/取消全部 
$("#checkAllChange").click(function() { 
if (this.checked == true) { 
$(".userid").each(function() { 
this.checked = true; 
}); 
} else { 
$(".userid").each(function() { 
this.checked = false; 
}); 
} 
}); 
// 全选 
$("#checkAll").click(function() { 
$(".userid").each(function() { 
this.checked = true; 
}); 
}); 
// 取消全部 
$("#removeAll").click(function() { 
$(".userid").each(function() { 
this.checked = false; 
}); 
}); 
// 反选 
$("#reverse").click(function() { 
$(".userid").each(function() { 
if (this.checked == true) { 
this.checked = false; 
} else { 
this.checked = true; 
} 
}) 
}); 
//批量删除 
$("#delAll").click(function() { 
var arrUserid = new Array(); 
$(".userid").each(function(i) { 
if (this.checked == true) { 
arrUserid[i] = $(this).val(); 
} 
}); 
alert("批量删除的:" + arrUserid); 
}); 
}); 
</script> 
</head> <body> 
<table border="1"> 
<tr> 
<td><input type="checkbox" id="checkAllChange" /></td> 
<td>用户id</td> 
<td>用户名</td> 
<td>电话</td> 
<td>地址</td> 
</tr> 
<tr> 
<td><input type="checkbox" class="userid" value="1" /></td> 
<td>1</td> 
<td>wangzs1</td> 
<td>18888000</td> 
<td>浦东</td> 
</tr> 
<tr> 
<td><input type="checkbox" class="userid" value="2" /></td> 
<td>2</td> 
<td>wangzs2</td> 
<td>18888001</td> 
<td>上海</td> 
</tr> 
<tr> 
<td><input type="checkbox" class="userid" value="3" /></td> 
<td>3</td> 
<td>wangzs3</td> 
<td>18888002</td> 
<td>河南</td> 
</tr> 
<tr> 
<td><input type="checkbox" class="userid" value="4" /></td> 
<td>4</td> 
<td>wangzs4</td> 
<td>18888003</td> 
<td>许昌</td> 
</tr> 
<tr> 
<td></td> 
<td><input type="button" id="checkAll" value="全选" /></td> 
<td><input type="button" id="removeAll" value="取消全部" /></td> 
<td><input type="button" id="reverse" value="反选" /></td> 
</tr> 
<tr> 
<td colspan="4" align="center"><input type="button" value="批量删除" id="delAll"></td> 
</tr> 
</table> 
</body> 
</html>
Javascript 相关文章推荐
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
百度地图api如何使用
Aug 03 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
js实现简单的碰壁反弹效果
Aug 30 Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
js实现的订阅发布者模式简单示例
Mar 14 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 #Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 #Javascript
自己封装的javascript事件队列函数版
Jun 12 #Javascript
jquery动态添加删除一行数据示例
Jun 12 #Javascript
checkbox勾选判断代码分析
Jun 11 #Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 #Javascript
js获取日期:昨天今天和明天、后天
Jun 11 #Javascript
You might like
PHP中的超全局变量
2006/10/09 PHP
超级实用的7个PHP代码片段分享
2012/01/05 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
JavaScript模板入门介绍
2012/09/26 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
python简单实现旋转图片的方法
2015/05/30 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
人力资源职位说明书
2014/07/29 职场文书
青年标兵事迹材料
2014/08/16 职场文书
校园安全广播稿范文
2014/09/25 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
平遥古城导游词
2015/02/03 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
Python装饰器详细介绍
2022/03/25 Python
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python