js全选案例_php.cn手记

abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全选案例</title> <style> *{margin: 0;padding: 0;} h2{margin:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>全选案例</title>
	<style>
		*{margin: 0;padding: 0;}
		h2{margin: 0 auto;width: 600px;text-align: center}
		#box{width: 100px;line-height: 30px;margin: 100px auto;border:1px solid black;text-align: center;}
		.checkAll{background: black;color: white;line-height: 50px;}
	</style>
</head>
<body>
	<h2>全选案例</h2><hr>
	<div id="box">
		<div class="checkAll"><input type="checkbox" id="checkAll" onclick="checkAll()" ><label for="checkAll">全选</label></div>
		<div class="item">
			<input type="checkbox" name="item[]">桃子<br>
			<input type="checkbox" name="item[]">栗子<br>
			<input type="checkbox" name="item[]">草莓<br>
			<input type="checkbox" name="item[]">香蕉<br>
		</div>
	</div>
</body>
<script>
	function checkAll(){
		var checkall, item;
		checkall = document.getElementById("checkAll");
		item = document.getElementsByName("item[]");
		if(checkall.checked){
			for(var i=0;i<item.length;i++){
				item[i].checked=true;
			}
		}else{
			for(var i=0;i<item.length;i++){
				item[i].checked=false;
			}
		}
	}
</script>
</html>

思路：onclick调用checkAll方法

与vip视频中的差别在于：先判断再循环赋值，减少运算次数

Correcting teacher：天蓬老师Correction time：2019-04-13 16:47:28
Teacher's summary：每个案例,都能总结思路的话, 你会进步非常快的, 我也是这样学习的

js全选案例

Popular Entries