<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

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

		<script>

			window.onload = function() {

				var checkedAll = document.getElementById("checkedAll");

				var checkedOne = document.getElementsByName("checkedOne");

				//全选和全不选事件

				checkedAll.onclick = function() {

					if(checkedAll.checked == true){

						for(var i = 0;i<checkedOne.length;i++) {

							checkedOne[i].checked = true;

						}

					}else {

						for(var i = 0;i<checkedOne.length;i++) {

							checkedOne[i].checked = false;

						}

					}

				}

				//反选事件

				document.getElementById("reSelect").onclick = function() {

					for(var i =0;i<checkedOne.length;i++) {

						checkedOne[i].checked = !checkedOne[i].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" name="checkedOne"/></td>

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

				</tr>

				<tr>

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

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

				</tr>

				<tr>

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

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

				</tr>

				<tr>

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

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

				</tr>

				<tr>

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

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

				</tr>

				<tr>

					<td><input type="checkbox" name="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>

JS案例五：设置全选、全不选以及反选的更多相关文章

  1. JS实现全选、不选、反选

    思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...

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

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

  3. JS checkbox 全选 全不选

    /* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...

  4. vue.js实战——购物车练习（包含全选功能）

    vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...

  5. 原生JS实现全选和不全选

    案例演示 源代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  6. js实现全选/全不选、反选

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. asp.net中Repeater结合js实现checkbox的全选/全不选

    前台界面代码: <input name="CheckAll" type="checkbox" id="CheckAll" value= ...

  8. js实现复选框全选/全不选/反选

    js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  9. js之checkbox的代码全选/全不选，使用id获取元素，而不是name

    每当有多个选项的时候,都会有一种想法是:全选,全不选,如果子选项有被选,父选项也得被选. 注意:这里是根据id来获取元素的,但是不能直接用getElementById,因为那只能返回一个,而不是集合. ...

随机推荐

  1. ERROR: Got error reading packet from server: A slave with the same server_uuid/server_id as this slave has connected to the master

    centos7.5 做binlog-server,拉取主库binlog报错 问题: [root@db03-53 binlog]# mysqlbinlog -R --host=10.0.0.55 --u ...

  2. Android文件各种存储路径的比较

    1.File cacheDir = context.getCacheDir(); 应用内部存储空间(数据文件私有)文件存储到这个路径下,不需要申请权限,当应用被卸载的时候,目录下的文件会被删除. 需要 ...

  3. shell编程(五)之函数

    function:函数 函数只有被调用才会执行如何调用:给定函数名 函数名出现的地方,会被自动替换为函数代码 函数的生命周期:被调用时创建,返回时终止return命令返回自定义状态结果 0:成功 1- ...

  4. Bytom的链式交易和花费未确认的交易

    当我们基于比原做应用的时候,在构建交易过程中会遇到以下两种情况.多个地址向一个地址转账,还有一种就是从一个地址分批次向多个地址转账.那我们今天就来介绍一下这两种交易构建的具体流程,以及贴出具体实现的代 ...

  5. 容器中的诊断与分析3——live diagnosis——lldb

    windows下,我们对于.net程序发生Crash,资源泄露,死锁等问题的分析,有神器windbg .net core程序运行在linux上时,该怎么进行对对Core Dump文件进行分析呢?今天介 ...

  6. ArcGIS Pro开发Web3D应用（1）——环境搭建与初始实例

    1.搭建环境 1.1 ArcGIS Web3D软件环境 ArcGIS Pro 2.0(必须) ArcGIS for Enterprise 10.5.1 (从10.5开始称呼为Enterprise)包括 ...

  7. yii DbCriteria相关属性常用方法

    $criteria = new CDbCriteria; //函数方式 $criteria->addCondition("id=1"); //查询条件,即where id = ...

  8. 在Vue项目中使用Element UI:按需引入和完整引入

    下面操作在main.js文件中进行 完整引入: import Element from 'element-ui'; //样式文件,需单独引入 import 'element-ui/lib/theme- ...

  9. PYTHON -- 基础3

    1.数据类型 1.int 类型 用于计算 1.1 bit_length() 转换为2进制的最小位置 有效的 i = 5 print(i.bit_length()) i 二进制 i.bit_length ...

  10. hdoj4859海岸线

    1.地图周围再加一圈海 2.周长最多为sum=n*(m+1)+m*(n+1).如果有邻接相同,要减1.最小割使相同最少.结果为sum-最小割 3.但是有E海滩,两边都能选.让E到S,T都连一个很大的数 ...