<!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. ASP.NET - Validators

    ASP.NET validation controls validate the user input data to ensure that useless, unauthenticated, or ...

  2. WebPack打包后如何调试

    作为一个程序员每天的大部分工作就是调试自己写的程序,那我们使用了webpack后,所以代码都打包到了一起,给调试带来了麻烦,但是webpack已经为我们充分考虑好了这点,它支持生产Source Map ...

  3. loadrunner常用函数集锦

    一.三个复制函数的区别: strcpy 原型:extern char *strcpy(char *dest,char *src);用法:#i nclude功能:把src所指由NULL结束的字符串复制到 ...

  4. git误commit大文件导致不能push问题解决

    git push时终端报错: error: RPC failed; HTTP 413 curl 22 The requested URL returned error: 413 Request Ent ...

  5. Nginx 504 Gateway Time-out分析及解决方法

    一.场景还原php程序在执行抓取远程图片库并保存至本地服务器的时候,出现了“504 Gateway Time-out”错误提示. 问题定位:由于图片巨多,所以下载时间很长(10分钟以上),引起网关超时 ...

  6. docker容器的时间同步

    好久没写博客了,有时间开始陆续整理一下工作中遇到的问题,今天罗列一下docker容器的时间同步问题 我们每次在run容器的时候,会存在时区不同的问题,这样对数据处理会有很大障碍,操作如下: 第一种方式 ...

  7. @keyframs实现图片gif效果

    页面中使用动效图 一般让设计出一个gif格式的图,但是git图效果都很差,有一个替代gif图做动效的方法:使用@keyframes 具体思路: 1.设计两个互斥的图片(相当于把gif图分割成一帧一帧的 ...

  8. .NET、C#和ASP.NET、ASP.NET MVC四者之间的区别

    什么是.NET? .NET是微软公司下的一个开发平台,.NET核心就是.NET Framwork(.NET框架)是.NET程序开发和运行的环境,在这个平台下可以用不同的语言进行开发,因为.NET是跨语 ...

  9. Ansible 脚本运行一次后，再次运行时出现报错情况，原因：ansible script 的格式不对，应改成Unix编码

    Ansible 脚本运行一次后,再次运行时出现报错情况,原因:ansible  script 的格式不对,应改成Unix编码 find . -name "*" | xargs do ...

  10. PPI | protein-protein interaction | 蛋白互作分析

    STRING database的挖掘 这个数据库绝对是做实验人的宝藏,里面包含了各种蛋白互作关系,不用做实验就有一大堆证据. IPA了解一下,收费的高端分析软件,大部分就是整合的这个数据库,很多大佬喜 ...