×

form表单里如何实现全选和全不选

作者:andy0012020.02.24来源:Web前端之家浏览:271评论:0
关键词:jsform

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。

javascript实现全选和全不选效果:

1、首先你需要了解input标签中复选框。当该复选框被选中时,调用该元素checked属性的值为true。这一点是我们利用js实现该效果的第一个要点。

2、全选:当鼠标点击全选这个复选框时,调用函数allSelet().使用for循环遍历每一个需要被选中的input元素(我们它们全部放在箱子里面),并给它们的checked属性赋值true。这样就完成了全选。

3、全不选:当鼠标点击全选这个复选框时,调用函数noSelet().使用for循环遍历每一个需要被选中的input元素(包括全选那个复选框,所以我们直接从document中获取input),并给它们的checked属性赋值false。这样就完成了全不选。

JavaScript实现全选与全不选代码:

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<title>Who is the best one?</title>
		<style type="text/css">
			*{
				background: greenyellow;
			}
		</style>
	</head>
 
	<body>
		<input type="checkbox" οnclick="allSelect()"/>全选
	    <input type="checkbox" οnclick="noSelect()"/>全不选
		<div id="box">
			<input type="checkbox" />选我
			<input type="checkbox" />选我
			<input type="checkbox" />选我
			<input type="checkbox" />选我
			<input type="checkbox" />选我
			<input type="checkbox" />选我
		</div>
		<script type="text/javascript ">
			function allSelect() {
				var oBox = document.getElementById("box");
				var aInput = oBox.getElementsByTagName("input");
				for(var i = 0; i < aInput.length; i++) {
					aInput[i].checked = true;
				}
 
			}
			function noSelect() {
				var oBox = document.getElementById("box");
				var aInput = document.getElementsByTagName("input");
				for(var i = 0; i < aInput.length; i++) {
					aInput[i].checked = false;
				}
			}
		</script>
	</body>
 
</html>

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://www.miarww.com.cn/article/js923840293840928340.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright ? 2019 Web前端之家(www.miarww.com.cn) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero

时时彩平台哪个好 幸运赛车开奖历史走势图 北京十一选五 福建体彩31选7技巧 排列三中奖最绝的方法 吉林11选5一定牛预测 中彩网app下载 北京pk拾赛车历史开奖记录 大发五分快三免费计划官网 黑龙江p62今日开奖结果 上海配资 湖北快三预测号码 上海快三跨度 天天红包赛发钱时间 广西快3现场开奖视频 配资平台哪个好`找恒瑞行配资 上海十一选五遗漏一定牛