<!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. webmagic爬虫抓取工作室成员博客

    一.导入依赖 <!--webmagic依赖--> <dependency> <groupId>us.codecraft</groupId> <ar ...

  2. asp.net 根据连接地址保存文件，图片

    第一种方式  下载图片,文件 WebClient my = new WebClient(); string url = "http://localhost:1015/resource/loa ...

  3. 7.20 Codeforces Beta Round #8

    链接:codeforces.com/contest/8 A 原因:RE,fantasy 的字符串的长度可能大于原字符串. B 题意:上下左右走,可能要避让障碍,问是否存在一个地图使得给定的路径为当前最 ...

  4. logstash 抓取IIS日志文件写入Elasticsearch

    如果需要对IIS日志进行分析可以使用logstash从文件中抓取出来进行分析: 输入部分: input { file { type => "iis_log_monitor" ...

  5. Spring Boot 2 整合Swagger简单入门

    Swagger是一款RESTFUL接口的文档在线自动生成+功能测试功能软件. 1.pom.xml添加配置 可以到http://mvnrepository.com上搜索springfox,便可以看到Sp ...

  6. [爬虫进阶]使用Jsoup取代你的一切网络请求方法(java,post,get,代理IP)

    [爬虫进阶]使用Jsoup取代你的一切网络请求方法(java,post,get,代理IP) 原文链接:https://www.cnblogs.com/blog5277/p/9334560.html 原 ...

  7. 【GO】【环境配置】

    1.首先下载GO的安装包:https://golang.org/doc/install#testing 找到上面一个Download超大按钮,找不到的可以不用再看了. 下载完成,安装. 安装成功后,启 ...

  8. IBase<T>

    public interface IBase<T>//基类 { IEnumerable<T> SelectAll();//查询所有 T FindById(int ID);//根 ...

  9. ubuntu使用抓包工具，charles

    参考官网:https://www.charlesproxy.com/documentation/installation/apt-repository/ wget -q -O - https://ww ...

  10. 基于三层架构项目下的Ado【六】

    一.基于三层架构项目下的Ado增删改查总结,提示:现在一般都是使用EF框架操作. 1. 先在model层创建出一个和你将会查询出一样类型的表,比如你将查询出的有五个字段,那么你就需要创建出一个和你查询 ...