<!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. 《动态规划_入门 LIS 问题 》

    问题描述 问题 A: 最长上升子序列 时间限制: 2 Sec  内存限制: 64 MB提交: 461  解决: 236[提交][状态][讨论版][命题人:外部导入] 题目描述 一个数列ai如果满足条件 ...

  2. Qt源码学习之信号槽

    Qt源码版本 Qt 5.12.0 moc文件 Qt在编译之前会分析源文件,当发现包含了Q_OBJECT宏,则会生成另外一个标准的C++源文件(包含Q_OBJECT宏实现的代码,文件名为moc_+原文件 ...

  3. CSS scroll-behavior和JS scrollIntoView让页面滚动平滑

    转自 https://www.zhangxinxu.com/wordpress/2018/10/scroll-behavior-scrollintoview-%E5%B9%B3%E6%BB%91%E6 ...

  4. krpano 常用标签

    <krpano></krpano>根标签 相当于 <body> <scene></scene>一个全景图场景 <image> 图 ...

  5. libc++abi.dylib: terminating with uncaught exception of type NSException (lldb)

    In Xcode 9 and Swift 4: Print exception stack to know the reason of the exception: Go to show break ...

  6. 关于两栏布局，三栏布局，一级点击三角触发select的onchange事件问题

    首先看这样一个效果:,这个截图来自移动端的列表的一整行,在这个效果当中,存在两个技术点,首先选择祝福卡这个宽度是一定的,右边的部分,宽度随着手机屏幕的宽度而自适应,再一个技术点就是点击最右侧向下箭头, ...

  7. caffe win添加新层

    1.编写.h和.cpp .cu文件 将.hpp文件放到路径caffe-windows\caffe-master\include\caffe\layers下 将.cpp文件和.cu放到路径caffe-w ...

  8. 小程序 新建项目底部tabbar

    在app.json中配置 { "pages": [ "pages/index/index", "pages/staging/staging" ...

  9. java.lang.IllegalStateException: ApplicationEventMulticaster not initialized - call 'refresh' before multicasting events via the context 错误

    spring boot 项目启动报错:原因一般是注入了相同名字的service -- :: com.gxcards.mes.MainWwwWeb: logStartupProfileInfo INFO ...

  10. 蓝桥杯第六届省赛 手链样式 STL

    小明有3颗红珊瑚,4颗白珊瑚,5颗黄玛瑙.他想用它们串成一圈作为手链,送给女朋友.现在小明想知道:如果考虑手链可以随意转动或翻转,一共可以有多少不同的组合样式呢? 分析:这个题首先一定要理解题意,转动 ...