作业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. 旁路电容的PCB布局布线透彻详解（4）

    原文地址点击这里: 前面使用了较多的篇幅介绍旁路电容的工作原理及其选择依据,我们已经能够为电路系统中相应的数字集成芯片选择合适的旁路电容,在实际应用过程中,旁路电容的PCB布局布线也会影响到高频噪声旁 ...

  2. vs里颜色显示块怎样显示

    就是这种 vs中选择工具-扩展和更新,搜索Web Essentials,安装就好了. 他会安装很多扩展,我这里只需要css相关的

  3. 微信获取信息发生错误（两个access_token的区别），错误代码：40001，说明：invalid credential, access_token is invalid or not latest hints

    微信有两个access_token,一个是基础access_token,一个是网页授权access_token. 想要获取不带unionid的用户信息(以下链接)使用基础access_token ht ...

  4. 理解css行高（line-height）

    首先我们要明确 line-height 的定义,line-height指的是两条文字基线之间的距离. 行内框盒子模型 所有内联元素的样式表现都与行内框盒子模型有关.所以这个概念是非常重要的. < ...

  5. ES6 学习笔记之对象的拓展

    1.属性的简洁表示法 ES6 允许直接写入变量和函数,作为对象的属性和方法.这样书写更加简洁. const foo = 'bar'; const baz = {foo}; baz //{foo: &q ...

  6. 一次性讲清楚spring中bean的生命周期之二：FactoryBean的前世今生

    前言 在<spring中FactoryBean是什么bean>一文中,带着小伙伴学习了spring中的FactoryBean,了解了到了FactoryBean其实是一种生产Bean的bea ...

  7. [Django REST framework - 视图组件之视图基类、视图扩展类、视图子类、视图集]

    [Django REST framework - 视图组件之视图基类.视图扩展类.视图子类.视图集] 视图继承关系 详图见文章末尾 视图组件可点我查看 两个视图基类:APIView.GenericAP ...

  8. 11、mysql索引详解

    1.索引介绍: 2.建立索引的方法: 注意:索引名称不要相同: (1)在建表的时候,可以增加主键索引的语句如下: 1)例一: create table student1 ( id int(4) not ...

  9. Jquery Validate动态添加和删除校验规则

    以下面文本框为例, <input type="text"name="username" id="username"/> 我们要让 ...

  10. 【分布式】CAP理论及其应用

    CAP Theorem CAP 指的就是 "consistency 一致性","availability 可用性" "partition-tolera ...