学习内容：

需求

用 JavaScript 实现全选、反选、多选

实现代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>checkbox</title>

	<script type="text/javascript">

		function checkChange(element) {

			// 通过 getElementsByName("hobby") 获取 input 标签数组对象

			var hobbys = document.getElementsByName("hobby");

			for(var item of hobbys) {

				// 把每个 hobby 的元素的状态修改成跟全选一致

				item.checked = element.checked;

			}

		}

		function checkAll(element) {

			var hobbys = document.getElementsByName("hobby");

			for(var i = 0; i < hobbys.length; i++) {

				if(element) {

					// 把每个 hobby 的元素的状态修改成和选项一致

					hobbys[i].checked = true;

				}

			}

		}

		function checkUnAll() {

			var hobbys = document.getElementsByName("hobby");

			for(var item of hobbys) {

				// 把每个 hobby 的元素的状态修改成跟之前相反

				item.checked = !item.checked;

			}

		}

	</script>

</head>

<body>

	请选择你的爱好:<br/>

	<input type="checkbox" onchange="checkChange(this)" id="checkAll"/>全选/全不选<br/>

	<div>

		<input type="checkbox" name="hobby"/>JAVA&nbsp;

		<input type="checkbox" name="hobby"/>打篮球&nbsp;

		<input type="checkbox" name="hobby"/>上网&nbsp;

		<input type="checkbox" name="hobby"/>撩妹&nbsp;

	</div>

	<div>

		<input type="button" id="btn_checkAll" onclick="checkAll(true)" value="全选"/>

		<input type="button" onclick="checkAll(false)" value="全不选"/>

		<input type="button" onclick="checkUnAll()" value="反选"/>

	</div>

</body>

</html>

总结：

以上就是用 JS对全选、反选、多选，代码的简单实现了，仅供参考，欢迎讨论交流。

巴特西

用 JS（JavaScript ）实现多选、全选、反选

JS小例题

学习内容：

需求

总结：

最新文章

热门文章