作业210721

提交代码

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>全选反选全不选</title>

	</head>

	<body>

		<!-- 选择框 -->

		<input type="Checkbox" name="box" onclick="selectAll()" value="1" />吃饭<br />

		<input type="Checkbox" name="box" onclick="selectAll()" value="2" />喝酒<br />

		<input type="Checkbox" name="box" onclick="selectAll()" value="3" />抽烟<br />

		<input type="Checkbox" name="box" onclick="selectAll()" value="4" />烫头<br />

		<input type="Checkbox" name="box" onclick="selectAll()" value="5" />打牌<br />

		<!-- 功能按钮 -->

		<input id="All" type="button" value="全选" onclick="All">

		<input id="None" type="button" value="全不选" onclick="None">

		<input id="Fan" type="button" value="反选" onclick="Fan">

		<script type="text/javascript">

			var All = document.getElementById('All');

			var None = document.getElementById('None');

			var Fan = document.getElementById('Fan');

			var boxes = document.getElementsByName("box"); //获取页面的选择框

			//全选

			All.onclick = function() {

				for (var i = 0; i < boxes.length; i++) {

					boxes[i].checked = true;

					//checked属性取true

				}

			}

			// 全不选

			None.onclick = function() {

				for (var i = 0; i < boxes.length; i++) {

					boxes[i].checked = false;

					//checked属性取false

				}

			}

			//2反选

			Fan.onclick = function() {

				for (var i = 0; i < boxes.length; i++) {

					boxes[i].checked = !boxes[i].checked;

					//checked属性取反

				}

			}

		</script>

	</body>

</html>

使用js实现全选功能。（全选，全不选，反选）的更多相关文章

  1. checkboxlist 下拉框多选功能 ,模拟dropdownlist带复选框效果

    前台代码 01.<html xmlns="http://www.w3.org/1999/xhtml"> 02.<head runat="server&q ...

  2. JS实现全选功能

    000. 开始 学习JS有一段时间了,最近看了一些JS练手的小demo实例,自己也尝试着用JS进行实现. 全选功能是在很多注册页面.获取用户兴趣爱好.让用户勾选一些选项等页面中常见的一种效果,主要有全 ...

  3. JS全选功能代码优化

    原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...

  4. jquery与js实现全选功能的区别---2017-05-12

    一.jquery常用的事件 click(),dbclick() focus(),blur() change() keydown(),keypress(),keyup() mousedown(),mou ...

  5. vue.js实战——购物车练习（包含全选功能）

    vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...

  6. js初学—实现checkbox全选功能

    布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...

  7. jQuery实现的全选、反选和不选功能

    适用于网页多选后需要进行批量操作的场景(如批量删除等).如有问题希望大家可以指正.谢谢~~ HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮 ...

  8. S全选功能代码

    JS全选功能代码优化 2014-06-26 00:00 by 龙恩0707, 470 阅读, 3 评论, 收藏, 编辑 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写 ...

  9. jQuery实现全选与全不选功能

    初始时: 实现功能后: 实现该功能的核心代码: <script> $(function(){ $("#selectBtn").click(function(){ con ...

随机推荐

  1. k8s 1.12 环境部署及学习笔记

    1.K8S概述 1.Kubernetes是什么 2.Kubernetes特性 3.Kubernetes集群架构与组件 4.Kubernetes核心概念 1.1 Kubernetes是什么 • Kube ...

  2. 【Linux】通过shell脚本对mysql的增删改查以及my.cnf的配置

    目录 shell操作mysql 1.获取mysql默认密码 2.修改my.cnf文件 3.shell创建mysql数据库 4.shell创建mysql表 5.shell添加数据 6.shell删除数据 ...

  3. 13、mysql主从复制原理解析

    13.1.mysql主从复制介绍: 1.普通文件,磁盘上的文件的同步方法: (1)nfs网络文件共享可以同步数据存储: (2)samba共享数据: (3)ftp数据同步: (4)定时任务:cronta ...

  4. css文字动画（自动换文字）

    html: <div class="content"> <div class="content__container"> <p c ...

  5. GIS坐标系测绘原理:大地水准面/基准面/参考椭球体/EPSG/SRI/WKT

    预热文章系列:<GIS历史概述与WebGis应用开发技术浅解>.<GIS坐标系:WGS84,GCJ02,BD09,火星坐标,大地坐标等解析说与转换>.<OGC标准WMTS ...

  6. 【重学Java】多线程基础（三种创建方式，线程安全，生产者消费者）

    实现多线程 简单了解多线程[理解] 是指从软件或者硬件上实现多个线程并发执行的技术. 具有多线程能力的计算机因有硬件支持而能够在同一时间执行多个线程,提升性能. 并发和并行[理解] 并行:在同一时刻, ...

  7. 备战-Java 容器

    备战-Java 容器 玉阶生白露,夜久侵罗袜. 简介:备战-Java 容器 一.概述 容器主要包括 Collection 和 Map 两种,Collection 存储着对象的集合,而 Map 存储着k ...

  8. 题解 guP3956 棋盘

    好吧本来这题可以用最短路跑完的,结果我硬是打了1.5小时的dfs... 其实这题并没有那么难,构造一个无向图再跑最短路即可. 我用的dj跑最短路 问题来了 如果(n,n)是无色的,那么图上就没有这个点 ...

  9. WORD加目录

    1.WORD2010样式右下角小按钮,打开"样式"对话框,打开"管理样式"按钮 2.选择"标题1"--显示--上移(1) 3.依次再选择&q ...

  10. ASP.NET 检测当前计算机及登录用户名

    TextBox1.Text = System.Security.Principal.WindowsIdentity.GetCurrent().Name;