作业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. 教你用python搭建一个「生活常识解答」机器人

    今天教大家如何用Python爬虫去搭建一个「生活常识解答」机器人. 思路:这个机器人主要是依托于"阿里达摩院发布的语言模型PLUG",通过爬虫的方式,发送post请求(提问),然后 ...

  2. 【Python】（六）Python数据类型-列表和元组,九浅一深，用得到

    您好,我是码农飞哥,感谢您阅读本文,欢迎一键三连哦. 本文分十个章节介绍数据类型中的列表(list)和元组(tuple),从使用说到底层实现,包您满意 干货满满,建议收藏,需要用到时常看看. 小伙伴们 ...

  3. 单臂路由&链路捆绑

    单臂路由&链路捆绑 目录 一.单臂路由 1.1.单臂路由作用 1.2.单臂路由实现不同VLAN间通信的原理 二.单臂路由相关命令配置 三.链路捆绑 3.1.以太网链路聚合原理 3.2.命令配置 ...

  4. R语言--图形基本使用1

    1 使用图形 1.1 交互式绘图 使用的是内置数据集:mtcars 画出散点图:plot(mtcars$mpg,mtcars$wt) 给图形加标题:title("车辆耗油与重量之间的关系&q ...

  5. WebGPU性能测试分析

    大家好,本文对WebGPU进行性能测试和分析,目的是为了对比WebGL和WebGPU在"渲染"和"计算"两个维度的性能差异,具体表现为CPU性能和FPS性能两个 ...

  6. 40、Linux文件误删除恢复操作

    rm -rf / #此方法删除不了/目录: rm -rf /* #此方法可以删除/目录下的所有内容,禁止使用: 40.1.前言: 作为一个多用户.多任务的操作系统,Linux下的文件一旦被删除,是难以 ...

  7. 9、解决mstsc卡顿的问题：

    1.同时按住"win+r"键调出"运行",在方框内输入"cmd"后点击"确定"打开dos窗口: 2.在dos中输入&qu ...

  8. Gym 101334E dp

    分析: 这一题给出的遍历的点的序列,不是树的中序遍历,前序遍历,只要遇到一个节点就打印一个节点.关键点就在,这个序列的首字母和尾字母一定要相同,因为最终都会回到根节点,那么每一个子树也一样. 状态: ...

  9. 面试：MyBatis面试总结

    1.什么是Mybatis? (1)Mybatis是一个半ORM(对象关系映射)框架,它内部封装了JDBC,开发时只需要关注SQL语句本身,不需要花费精力去处理加载驱动.创建连接.创建statement ...

  10. get和post两种表单提交方式的区别

    今天看到一篇博客谈论get和post区别,简单总结一下https://www.cnblogs.com/logsharing/p/8448446.html 要说两者的区别,接触过web开发的人基本上都能 ...