<!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. Picasso自定义缓存目录

    项目做完终于有点自己的时间了,就想看点源码涨涨姿势,那就看看Picasso这个牛逼哄哄的图片加载框架吧,当然这个也是自己最喜欢的图片加载框架. 实际项目中可能有需求自己定制图片的缓存目录,那么就需要自 ...

  2. cmake 如何生成一个win32工程

    只需要加上下面一句连接选项就可以了. IF(WIN32) SET(CMAKE_EXE_LINKER_FLAGS "${CMAKE_EXE_LINKER_FLAGS} /SUBSYSTEM:W ...

  3. NYOJ-277-车牌号

    车牌号 时间限制:3000 ms  |  内存限制:65535 KB 难度:1 描写叙述 茵茵非常喜欢研究车牌号码,从车牌号码上能够看出号码注冊的早晚,据研究发现,车牌号码是按字典序发放的,如今她收集 ...

  4. Git命令学习之旅——日志和穿梭版本号

    在总结了git命令的基础之后,接下来我们看一下基础的一些进阶内容:删除撤销命令.日志查看命令等 既然有加入文件的功能,那么相相应的肯定有移除文件的功能,命令例如以下:git rm [文件名称] 在输入 ...

  5. cocos2d-x 3.0 回调函数

    參考文章: http://blog.csdn.net/crayondeng/article/details/18767407 http://blog.csdn.net/star530/article/ ...

  6. Hbase笔记3 shell命令

    http://www.jb51.net/article/31172.htm 这个文章写得挺好 1.HBase的shell就和我们用Mysql的终端是一个意思,比如我们安装好Mysql,配置好了环境变量 ...

  7. @Autowired @Transaction @Service同时出现。

    对于@Autowired,如果只写这些,肯定是根据类型自动装配这个没问题. @Service public class AcRoleServiceImpl implements AcRoleServi ...

  8. Jmeter3.0-插件管理

    本文转自推酷:http://www.tuicool.com/articles/UV7fI3V JMeter ,老牌,开源,轻量,Apache基金会的顶级项目,光是这些关键字就足以让大量用户将其纳入自己 ...

  9. Android+git+hudson+gradle持续集成

    linux 主机   android sdk安装忽略 jdk安装忽略 hudson安装忽略 gradle安装 1:下载相应的gradle(这里是gradle-2.10-all.zip)  2 :  解 ...

  10. is_callable — 检测参数是否为合法的可调用结构

    说明 bool is_callable ( callable $name [, bool $syntax_only = false [, string &$callable_name ]] ) ...