Js实现前端全选和反选

来源：动视网责编：小采时间：2020-11-27 20:12:38

Js实现前端全选和反选

Js实现前端全选和反选:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload = function(){ selAll = document.getElementById("selAll"); hobbys = document.getElement

推荐度：

点击下载本文 文档为doc格式

导读Js实现前端全选和反选:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload = function(){ selAll = document.getElementById("selAll"); hobbys = document.getElement

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script>
	
	window.onload = function(){
	selAll = document.getElementById("selAll");
	hobbys = document.getElementsByName("hobby");
	fx = document.getElementById("fx");
	
	//全选事件
	selAll.onclick = function(){
	//全选
	if(selAll.checked == true){
	for (var i=0;i<hobbys.length;i++) {
	hobbys[i].checked = true;
	}
	}else{
	for (var i=0;i<hobbys.length;i++) {
	hobbys[i].checked = false;
	}
	}
	}
	
	
	//反选
	fx.onclick = function(){
	
	for (var i=0;i<hobbys.length;i++) {
	var b = hobbys[i];
	if(b.checked == true){
	b.checked = false;
	}else{
	b.checked = true;
	}
	}
	}
	
	}
	
	
	
	</script>
	</head>
	<body>
	<input type="checkbox" name="" id="selAll" />全选
	<button id="fx">反选</button>
	<br>
	<input type="checkbox" name="hobby" />篮球
	<input type="checkbox" name="hobby" />足球
	<input type="checkbox" name="hobby" />乒乓球
	<input type="checkbox" name="hobby" />羽毛球
	</body>
</html>

Js实现前端全选和反选

推荐度：

点击下载本文 文档为doc格式

标签：全选 js 全部选中

热门焦点

Js实现前端全选和反选

Js实现前端全选和反选

Js实现前端全选和反选

最新推荐

猜你喜欢

热门推荐