实现全选、不选、反选功能-CSDN博客

<!DOCTYPE html>
			<head>
				<meta charset="UTF-8">
				<title>全选、不选、反选</title>
				<style>
					
				</style>
				<script>
					window.function()
					{
						var oBtn1=document.getElementById('btn1');
						var oBtn2=document.getElementById('btn2');
						var oBtn3=document.getElementById('btn3');
						var oDiv=document.getElementById('div1');
						var oCh=oDiv.getElementsByTagName('input');

						oBtn1.function()
						{
							for(var i=0;i<oCh.length;i++)
							{
								oCh[i].checked=true;
							}
						};

						oBtn2.function()
						{
							for(var i=0;i<oCh.length;i++)
							{
								oCh[i].checked=false;
							}
						};

						oBtn3.function()
						{
							for(var i=0;i<oCh.length;i++)
							{
								if(oCh[i].checked==true)
								{
									oCh[i].checked=false;
								}
								else
								{
									oCh[i].checked=true;
								}
							}
						};
					}
           		</script>
			</head>
			<body>
				<input id="btn1" type="button" value="全选">
				<input id="btn2" type="button" value="不选">
				<input id="btn3" type="button" value="反选">
				<div id="div1">
					<input type="checkbox" /><br>
					<input type="checkbox" /><br>
					<input type="checkbox" /><br>
					<input type="checkbox" /><br>
					<input type="checkbox" /><br>
					<input type="checkbox" /><br>
					<input type="checkbox" /><br>
					<input type="checkbox" /><br>
				</div>
			</body>
			</html>