javascript学习之全选功能

abstract：<!DOCTYPE html> <html> <head> <title>javascript学习之全选功能</title> <style type="text/css"> .box{width: 120px; height: 190px;

<!DOCTYPE html>
<html>
<head>
	<title>javascript学习之全选功能</title>
	<style type="text/css">
		.box{width: 120px; height: 190px; border: 1px solid #000; border-radius: 5px; padding: 10px 10px; margin: 20px auto;}
		.box div{border-bottom: 1px solid #000; padding-bottom: 5px; margin-bottom: 8px;}
		.box input{margin:8px;}
	</style>
</head>
<body>
	<div class="box">
		<div><input type="checkbox" onclick="checkall()" id="checkall" name=""><label for="checkall">全选</label></div>
		<input type="checkbox" name="item[]">HTML<br />
		<input type="checkbox" name="item[]">CSS<br />
		<input type="checkbox" name="item[]">javascript<br />
		<input type="checkbox" name="item[]">PHP<br />
		<input type="checkbox" name="item[]">ThinkPHP<br />
	</div>
	<script type="text/javascript">
		function checkall(){
			var checkall;
			var 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>

</body>
</html>

Correcting teacher：查无此人Correction time：2019-05-10 14:17:44
Teacher's summary：完成的不错。如果是商城购物车，全选还可以把价格计算。继续加油。

javascript学习之全选功能

Popular Entries