全选学习html+css+js

abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全选</title> <style type="text/css"> .box{width: 120px;

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>全选</title>
	<style type="text/css">
		.box{width: 120px;height: 250px;border: 1px solid #ccc;border-radius: 5px;padding: 5px 10px;margin: 20px auto;}
		.box div{border-bottom: 1px solid #ccc;padding-bottom: 5px;}
		.box input{margin: 8px;}
	</style>
	<script type="text/javascript">
		function checkAll() {
			var checkall,item;
			checkall=document.getElementById('checkall')
			item=document.getElementsByName("item[]")
			for (var i=0;i<item.length;i++){
				if(checkall.checked){
					item[i].checked=true;
				}else{
					item[i].checked=false;
				}
			}
		}
	</script>
</head>
<body>
<div class="box">
	<div>
		<input type="checkbox" id="checkall" onclick="checkAll()"><label for="checkall">全选</label>
	</div>
	<input type="checkbox" name="item[]">选项1<br>
	<input type="checkbox" name="item[]">选项2<br>
	<input type="checkbox" name="item[]">选项3<br>
	<input type="checkbox" name="item[]">选项4<br>
	<input type="checkbox" name="item[]">选项5<br>
	<input type="checkbox" name="item[]">选项6<br>

</div>
</body>
</html>

Correcting teacher：灭绝师太Correction time：2019-03-05 09:24:27
Teacher's summary：全选案例在后期的使用场景很多,要多多练习掌握!

全选学习html+css+js

Popular Entries