js 多选项的全选和反选

最新推荐文章于 2021-01-30 07:06:12 发布

hadoopxsy

最新推荐文章于 2021-01-30 07:06:12 发布

阅读量268

点赞数

分类专栏： js学习之路文章标签： js 多选项的全选和反选

本文链接：https://blog.csdn.net/hadoopxsy/article/details/79755571

版权

js学习之路专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>

			#box,#top{
				width: 300px;
				text-align: center;
			}
			li{
				list-style-type: none;
			}
		</style>
		<script>
			window.onload = function() {
				var bts = document.getElementsByTagName("button");
				var inputList = document.getElementById("box").getElementsByTagName("input");
				//封装函数
				function tagp(lag){
					for(var i=0;i<inputList.length;i++){
						inputList[i].checked = lag;
					}
				}
				
				bts[0].onclick = function(){tagp(true)};
				
				bts[1].onclick = function(){
					for(var i=0;i<inputList.length;i++){
						if(inputList[i].checked){
							inputList[i].checked = false;
						}else{
							inputList[i].checked = true;
						}
					}
				}
				bts[2].onclick = function(){tagp(false)};
			}
		</script>
	</head>
	<body>
		<div id="top">
			<button>全选</button>
			<button>反选</button>
			<button>取消</button>
		</div>
		<div id="box">
			<li>选择<input type="checkbox"></li>
			<li>选择<input type="checkbox"></li>
			<li>选择<input type="checkbox"></li>
			<li>选择<input type="checkbox"></li>
			<li>选择<input type="checkbox"></li>
			<li>选择<input type="checkbox"></li>
		</div>
	</body>
</html>