javascript全选加反选

abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全选加反选</title> <link rel="stylesheet" type="text/css&q

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>全选加反选</title>
	<link rel="stylesheet" type="text/css" href="">
	<style type="text/css">
		.box{width: 180px;height: 300px;border: 1px solid #000; margin: 30px auto;text-align: center;}
		.box div{width: 120px; border-bottom: 1px solid #000;padding: 10px;margin: 0 auto 20px;}
		.box>input{margin: 10px;}

	</style>
</head>
<body>
	<div class="box">
		<div>
			<input type="checkbox" id="checkAll" onclick="checkAll()"><label for="checkAll">全选</label>
			<input type="button" onclick="checkOut()" value="反选">
		</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>
<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;
			}
		}
	}
	function checkOut(){
		item=document.getElementsByName('item[]');
		for(var i=0;i<item.length;i++){
			if(item[i].checked){
				item[i].checked=false;
			}else{
				item[i].checked=true;
			}
		}
	}
</script>
</body>
</html>

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

javascript全选加反选

Popular Entries