<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>全选和全不选以及反选</title>

		<script src="../js/jquery-1.8.3.js"></script>

		<script>

			$(function() {

				//全选事件

				$("#checkedAll").click(function() {

					$(".checkedOne").attr("checked",this.checked);

				});

				$("#reSelect").click(function() {

					$(".checkedOne").each(function() {

						this.checked = !this.checked;

					});

				});

			});

		</script>

	</head>

	<body>

		<table id="tbl" border="1" border-collapse="collapse" align="center" cellspacing="0" cellpadding="5" width="400" height="20">

			<thead>

				<tr>

					<th><input type = "checkbox" id="checkedAll">全选</input></th>

					<th>编号</th><th>姓名</th><th>年龄</th>

				</tr>

			</thead>

			<tbody>

				<tr>

					<td><input type="checkbox" class="checkedOne"/></td>

					<td>1</td><td>张三</td><td>12</td>

				</tr>

				<tr>

					<td><input type="checkbox" class="checkedOne"/></td>

					<td>2</td><td>李四</td><td>22</td>

				</tr>

				<tr>

					<td><input type="checkbox" class="checkedOne" /></td>

					<td>3</td><td>王五</td><td>13</td>

				</tr>

				<tr>

					<td><input type="checkbox" class="checkedOne"/></td>

					<td>4</td><td>马六</td><td>14</td>

				</tr>

				<tr>

					<td><input type="checkbox" class="checkedOne"/></td>

					<td>5</td><td>伍六七</td><td>17</td>

				</tr>

				<tr>

					<td><input type="checkbox" class="checkedOne"/></td>

					<td>6</td><td>梅花十三</td><td>17</td>

				</tr>

				<tr>

					<td colspan=4><input type="button" value="反选" id="reSelect" /></td>

				</tr>

			</tbody>

		</table>

	</body>

</html>

JQuery案例二：实现全选、全不选和反选的更多相关文章

  1. 全选全不选案例table表格

    全选全不选案例table表格 案例一纯table表格 <table class="table table-bordered"> <thead class=&quo ...

  2. jquery之全选全不选

    <input type="checkbox" onclick="selall(this)" />全选/全不选 <input type=&quo ...

  3. jquery实现全选、不选、反选的两种方法

    在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用pro ...

  4. Dynamic CRM 2013学习笔记（二十六）报表设计：Reporting Service报表 动态参数、参数多选全选、动态列、动态显示行字体颜色

    上次介绍过CRM里开始报表的一些注意事项:Dynamic CRM 2013学习笔记(十五)报表入门.开发工具及注意事项,本文继续介绍报表里的一些动态效果:动态显示参数,参数是从数据库里查询出来的:参数 ...

  5. jQuery/javascript实现全选全不选

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

  6. jQuery实现Checkbox中项目开发全选全不选的使用

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

  7. 利用jQuery实现CheckBox全选/全不选/反选

    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...

  8. jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法

    如下图: <head> <title></title> <style type="text/css"> div { border: ...

  9. 【七】jquery之属性attr、 removeAttr、prop[全选全不选及反选]

    全选全不选 界面: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

随机推荐

  1. Maven解决包冲突

    依赖树 $ mvn dependency:tree [WARNING] [WARNING] Some problems were encountered while building the effe ...

  2. [Java]先有Class还是先有Object？

    先有鸡还是先有蛋 这个问题让我想到了一个古老的问题,先有鸡还是先有蛋. 回到本题 下面让我们详细看一下这个问题: 在Java的对象模型中: 所有的类都是Class类的实例,Object是类,那么Obj ...

  3. 洛谷 P1027 【Car的旅行路线】

    题目描述 又到暑假了,住在城市A的Car想和朋友一起去城市B旅游.她知道每个城市都有四个飞机场,分别位于一个矩形的四个顶点上,同一个城市中两个机场之间有一条笔直的高速铁路,第i个城市中高速铁路的单位里 ...

  4. webpack 4.X 与 Vue 2.X结合

    # Vue.js ## 注意: 有时候使用`npm i node-sass -D`装不上,这时候,就必须使用 `cnpm i node-sass -D` ## 在普通页面中使用render函数渲染组件 ...

  5. poi 导入Excle

    一,AOP 是什么 Apache POI 提供java 程序对Microsoft Office格式文档的读写功能操作 二,所需要的jar包 三,实现代码 1, 读取Excle 返回Workbook格式 ...

  6. 【Mac】【创建钥匙串】

    1 Mac在钥匙串创建系统证书失败 https://blog.csdn.net/lllkey/article/details/79423596 问题: 在Eclipse的Debug,使用gdb的时候, ...

  7. Qt551.OpenGL.ZC简单例子

    1.主要 模仿代码:OpenGL的教程 第3课 "tutorial03_matrices"的代码(E:\OpenGL_something\ogl-master) 2.参考代码:Qt ...

  8. NGUI实现滑动屏幕的时候，进行环形旋转

    在滑动屏幕的时候,上图中的内容饶圆中心旋转,并且箭头的方向保持不变 每个Item上挂载的脚本: using UnityEngine; public class ItemTest : MonoBehav ...

  9. 数据库-left join，right join，inner join，full join

    2019-04-18 22:36:26 sql中的连接查询有inner join(内连接).left join(左连接).right join(右连接).full join(全连接)四种方式,它们之间 ...

  10. .net core创建控制台应用程序和mvc程序

    一.创建控制台应用程序 1.查看支持哪些类型:dotnet new --help 2.创建项目(先定位到需要创建的目录) dotnet new console -o ./myconsole 3.查看目 ...