<!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. top命令详解不完整的地方欢迎评论

    第一行: top - 20:42:47 up 57 days,  1:25,  4 users,  load average: 0.00, 0.00, 0.00 现在时间20:42:47,启动了57 ...

  2. day19

    """ time 用于处理时间相关 1.获取时间 2.不同格式的时间转换 3.sleep函数"""import time# 浮点型的时间戳 ...

  3. jQuery的offset、position、scroll，元素尺寸、对象过滤、查找、文档处理

    jQuery_offset和position var offset = $('.xxx').offset() console.log(offset.left.,offset.top)xxx相对于页面左 ...

  4. Python初次实现MapReduce——WordCount

    前言 Hadoop 本身是用 Java 开发的,所以之前的MapReduce代码小练都是由Java代码编写,但是通过Hadoop Streaming,我们可以使用任意语言来编写程序,让Hadoop 运 ...

  5. Django中的FBV与CBV

    一. FBV FBV(function based views) 基于函数的视图, 即一个url对应一个视图函数. 1.1 FBV代码示例 urls.py from django.contrib im ...

  6. 浏览器输入URL后，HTTP请求返回的完整过程

    1.Redirect,跳转    浏览器记录里这个地址永久跳转的新地址,浏览器先去判断需不需要跳转 2.Application cache ,应用缓存    浏览器看请求的资源是否有缓存 3.DNS解 ...

  7. python实现简单二分查找

    #!/usr/bin/pythondef binary_search(list, item): low = 0 high = len(list)-1 while low <= high: mid ...

  8. Manjaro安装后，应该做的操作，仅作为自己备份使用，如有参考不懂，请留言咨询，或Q609916691

    家目录下,通用文件夹名称中英文互转: --(1)中文->英文 export LANG=en_US.UTF-8 xdg-user-dirs-update --force --(2)英文->中 ...

  9. Java中封装类型.valueOf()

    @Test public void test() { Integer i3 =128; Integer i4=128; boolean integerGT127=i3==i4; //false Sys ...

  10. vue试题

    1.v-for可是实现数据遍历显示,不仅可以遍历数组,也可以遍历对象,还可以从数值中取值. 2.vue的生命周期钩子 1)实例,组件通过new Vue()创建出来之后会初始化事件和生命周期,然后就会执 ...