[作特效, 學JS] -- 04 複選框全選

時間 2019-11-17

原文原文鏈接

通常會用在郵箱...

最終效果是醬嬸兒的...

最終代碼

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="button" value="全選">
	<div id="div1">
		<input type="checkbox">複選框1</input>
		<br>
		<input type="checkbox">複選框2</input>
		<br>
		<input type="checkbox">複選框3</input>
		<br>
		<input type="checkbox">複選框4</input>
		<br>
		<input type="checkbox">複選框5</input>
		<br>
		<input type="checkbox">複選框6</input>
		<br>
		<input type="checkbox">複選框7</input>
		<br>
		<input type="checkbox">複選框8</input>
		<br>
		<input type="checkbox">複選框9</input>
		<br>
		<input type="checkbox">複選框10</input>
	</div>
</body>
<script> var aInput = document.getElementById('div1').getElementsByTagName('input'); document.querySelector("input[type='button']").onclick = function(){ for(var i = 0; i<aInput.length;i++){ aInput[i].checked = true; } } </script>
</html>
複製代碼