<!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. SVN忽略不提交文件夹

    eclipse提交经常要同步后再提交或更新,但是这时有很多不需要提交的文件.文件夹比较碍事,这时候就可以在svn上设置不需要关注的文件夹: 1.windows->preferences-> ...

  2. server.xml引入子文件配置（tomcat虚拟主机）

    在配置tomcat虚拟主机时候,如何每一个虚拟主机写成单独文件,server.xml包含这些子文件? 如以下<OneinStack>中,添加JAVA环境虚拟主机后tomcat配置文件详情: ...

  3. flutter插件汇总

    audio_recorder: any #录音.播放 flutter_sound: ^#录音 dropdown_menu: ^#下拉菜单 simple_permissions:#权限获取 easy_a ...

  4. 【做题】SRM701 Div1 Hard - FibonacciStringSum——数学和式＆矩阵快速幂

    原文链接 https://www.cnblogs.com/cly-none/p/SRM701Div1C.html 题意:定义"Fibonacci string"为没有连续1的01串 ...

  5. js函数式编程curry与compose实现

    //自行实现以下curry函数和compose //curry function curry(fn) { return function aa (...arg) { if (arg.length &g ...

  6. Redis集群 - Sentinel与RAFT算法

    引入   在主从模型中讲到 一旦Master宕机失效,需要手动将Slave角色提升为Master,否则这个子集群将不可用.   这个缺陷使得系统可用性大大降低.因此Redis专门提供了一个哨兵机制来实 ...

  7. kali虚拟机添加共享文件夹

    1.保证安装了vmtools 2.在虚拟机本身设置共享文件夹,如图 其中选的这个文件夹就是宿主机里待共享的文件夹. 3,在kali里启用它: vmhgfs-fuse .host:[宿主机文件夹] /m ...

  8. SpringCloud问题解决：spring-cloud-eureka启动出错Cannot execute request on any known server

    场景: 在启动eureka server时,出现以下错误: com.sun.jersey.api.client.ClientHandlerException: java.net.ConnectExce ...

  9. mysql分库 分页查询

    Mysql海量数据分表分库如何列表分页? 1.现在使用ElasticSearch了.基于Lucene的解决方案 2.必须将mysql里的数据写入到类似hbase这样的分布式数据库,查询快.但分页.查询 ...

  10. django面试题

    1. 对Django的认识?   #1.Django是走大而全的方向,它最出名的是其全自动化的管理后台:只需要使用起ORM,做简单的对象定义,它就能自动生成数据库结构.以及全功能的管理后台. #2.D ...