[作特效, 学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>
复制代码

[作特效, 学JS] -- 04 复选框全选

通常会用在邮箱...

最终效果是酱婶儿的...

最终代码

专栏地图