全选框功能实现

Original 2019-05-05 19:40:04 235
abstract:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全选</title> <style type="text/css"> .box{width: 120
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>全选</title>
	<style type="text/css">
		
		.box{width: 120px;height: 250px;border: 1px solid #000;border-radius: 5px;padding: 5px 10px;margin: 20px auto;}
		.box div{border-bottom: 1px solid #000;padding-bottom: 10px;margin-bottom: 8px;}
		.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-05-06 09:37:12
Teacher's summary:完成的不错。如果是商城的购物车,全选要增加价格计算。继续加油。

Release Notes

Popular Entries