作业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. Vue3全局APi解析-源码学习

    本文章共5314字,预计阅读时间5-15分钟. 前言 不知不觉Vue-next的版本已经来到了3.1.2,最近对照着源码学习Vue3的全局Api,边学习边整理了下来,希望可以和大家一起进步. 我们以官 ...

  2. vim安装及个性化配置

    1.安装vim,并且vim命令的别名设置为vi yum install vim -y (如果不能识别vim命令,需要先安装vim) vi /etc/bashrc 或者 vi ~/.bashrc 在最后 ...

  3. PUN丨实用API

    原文地址:PUN丨实用API 当前房间人数 int num = PhotonNetwork.CurrentRoom.PlayerCount; 当前脚本是否属于当前玩家 //需继承MonoBehavio ...

  4. 9.4、安装zabbix(1)

    1.什么是zabbix: zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案: zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以 ...

  5. Gym 100169E Tetrahedron Inequality

    大致题意: 给出六条边,判断是否能组成四面体 分析: 四面体由四个三角形组成,所以每一条边肯定要符合三角形的任意两边大于第三边的性质.一开始以为这样判断就可以了,然而这题并没有这么简单. 如右图,有四 ...

  6. win10 共享文件夹设置无需用户名密码访问

    文件夹设置共享,添加Everyone 文件夹右键属性,选择共享,添加Everyone,添加后可设置读写权限. 权限添加Everyone,不然没有权限访问 设置安全策略 Win+R 打开运行,输入 se ...

  7. 大数据-Hadoop 本地运行模式

    Grep案例 1. 创建在hadoop-2.7.2文件下面创建一个input文件夹 [atguigu@hadoop101 hadoop-2.7.2]$ mkdir input 2. 将Hadoop的x ...

  8. 安卓开发--探究碎片Fragment

    简述: 最近做开发的时候又遇到了Fragment,发现太久没写,都快忘了,就抓紧写个笔记(我太懒的了233) Fragment可以简单的看成迷你的活动,它和活动一样都有布局和生命周期,它可以嵌入活动之 ...

  9. buu [BJDCTF2020]easyrsa

    下载附件是一个py文件,打开之后,发现是常规的rsa,不过有几个函数不知道. 这里记录一下, Fraction(a,b) 相当于 a/b Derivative(f(x),x) : 当x='x'时,f( ...

  10. WAF集成：Acunetix和FortiWeb

    Acunetix API使您有机会自动化任务以提高效率,尤其是在您可以加速与工作流其他组件的集成功能时.在此示例中,我们将在上一篇文章的基础上,向您展示如何在Bash脚本中使用Acunetix API ...