作业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. golang 写文件--详细解释

    1,不覆盖指定的文件 先看代码怎么写,下面再具体解释. func writeToFile(msg string) { f, err := os.OpenFile("/home/mingbai ...

  2. 20201123 实验一《Python程序设计》实验报告

    20201123 2020-2021-2 <Python程序设计>实验一报告 课程:<Python程序设计> 班级:2011班 姓名:晏鹏捷 学号:20201123 实验教师: ...

  3. 全新安装Windows版 Atlassian Confluence 7.3.1 + MySQL 8.0，迁移数据，并设置服务自启

    Confluence是一个专业的企业知识管理与协同软件,也可以用于构建企业wiki.使用简单,但它强大的编辑和站点管理特征能够帮助团队成员之间共享信息.文档协作.集体讨论,信息推送. 安装Conflu ...

  4. 修改MySQL时区

    说明: 1.Windows版本暂无发现问题 2.CentOS-Docker版本需要修改时区 通过sql命令临时修改 mysql> set global time_zone = '+8:00'; ...

  5. 解决spring boot中文乱码问题

    在开发或学习当中,我们不可避免的会碰到中文乱码的问题(好想哭,但还是要保持微笑!) 今天,在学习spring boot中碰到了中文乱码问题. 首先,看了一下workspace是不是设置utf-8默认字 ...

  6. php 基于redis使用令牌桶算法 计数器 漏桶算法 实现流量控制

    通常在高并发和大流量的情况下,一般限流是必须的.为了保证服务器正常的压力.那我们就聊一下几种限流的算法. 计数器计数器是一种最常用的一种方法,在一段时间间隔内,处理请求的数量固定的,超的就不做处理. ...

  7. 12 shell case in语句

    Shell也支持两种分支结构(选择结构),分别是 if else 语句和 case in 语句.当分支较多,并且判断条件比较简单时,使用 case in 语句就比较方便了. if else 语句与ca ...

  8. Nginx配置中的log_format用法梳理 （转）

      nginx服务器日志相关指令主要有两条,一条是log_format,用来设置日志格式,另外一条是access_log,用来指定日志文件的存放路径.格式和缓存大小,一般在nginx的配置文件中日记配 ...

  9. Java实验项目三——采用面向对象的方式设计线性表

    Program: 采用面向对象的方法设计一个线性表,目的是为其他需要用线性表的应用提供线性表对象. 1.list包中,定义线性表类 1 /* 2 * Description:定义线性表类 3 * 4 ...

  10. 【重学Java】IO流

    IO流的UML类图 File类 File类概述和构造方法[应用] File类介绍 它是文件和目录路径名的抽象表示 文件和目录是可以通过File封装成对象的 对于File而言,其封装的并不是一个真正存在 ...