<!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>username</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>

jQuery实现复选框全选/所有取消/反选/获得选择的值的更多相关文章

  1. Jquery表格变色 复选框全选，反选

    /*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...

  2. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  3. jQuery 前端复选框 全选 反选 下拉菜单联动

    jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...

  4. jQuery中的几个案例：隔行变色、复选框全选和全不选

    1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...

  5. jQuery实现复选框 全选、反选、全不选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  6. jQuery 实现复选框全选、反选及获取选中的值

    实现复选框全选,反选及获取选中的值: 代码如下: <!doctype html> <html lang="en"> <head> <met ...

  7. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  8. JavaScript小例子：复选框全选

    JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...

  9. 复选框全选、全不选和反选的效果实现VIEW:1592

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  10. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Angular 学习笔记——ng-disable

    <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...

  2. 模拟select控件&&显示单击的坐标&&用户按下键盘，显示keyCode

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Android学习（十四） Service组件

    一.定义 运行在后台,没有页面,不可见.优先级高于Activity,当系统内存不足时,会先释放一些Activity.注意,Service同样是运行在主线程中,不能做一些耗时操作.如果一定要做一些耗时的 ...

  4. ios网络学习------10 原生API文件上传

    使用原生态的api上传文件的实现: #import "MainViewController.h" @interface MainViewController () @propert ...

  5. mui 本地打包

    第一步:下载HBuilder离线打包Android版SDK 网址:http://ask.dcloud.net.cn/article/38 第二步:导入项目 启动带ADT的eclipse程序,菜单中选择 ...

  6. poj1062昂贵的聘礼

    这个题目我最開始看题目看了半天,看不懂.. 可是通过看例子及答案最终看懂了. .. 首先先解决等级的关系. .假设等级越界.则不能交换..所以原本等级的界限是 [rank[1]-m,rank[1]+m ...

  7. 【LoadRunner】安装LoadRunner

    LoadRunner安装 下载好LoadRunner安装包,点击运行 在点击安装后,会提示需要安装一下程序,直接点击[确定]安装即可. 上述程序安装完毕后,会自动弹出下面的窗口,点击[下一步] 选择[ ...

  8. oracle 序列重置

    问题一:怎样重置oracle序列 oracle序列创建以后,假设想重置序列从 0 開始,逐渐递增1,能够採用例如以下存储过程: create or replace procedure reset_se ...

  9. 如何进入到Docker容器内部

    启动Docker容器后,对应的服务(例如tomcat启动)也通过dockerfile文件命令运行起来了,这个时候如何进行容器内部观察容器的运行状态. 1.docker attach 这个命令在创建一个 ...

  10. github上比較好的开源项目（持续更新）

    1:https://github.com/Skykai521/StickerCamera 实现相机功能 实现对图片进行裁剪的功能 图片的滤镜功能 能为图片加入贴纸(贴纸可移动,放大,旋转) 能为图片加 ...