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>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Js實現前端全選和反選

推薦度：

點擊下載本文 文檔為doc格式

標簽：全選 js 全部選中

熱門焦點

Js實現前端全選和反選

Js實現前端全選和反選

Js實現前端全選和反選

最新推薦

猜你喜歡

熱門推薦