Javascript：全选和反选

最新推荐文章于 2024-04-02 19:39:43 发布

waterport

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量398

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/yanloveyang/article/details/41481571

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Javascript数组</title>
	<script type="text/javascript">
		window.onload = function()
		{
			var select_all = document.getElementById("select_all");
			var deselect = document.getElementById("reselect");
			var items = document.getElementsByClassName("item");
			
			//全选和取消全选操作
			select_all.onclick = function()
			{
				if(select_all.checked==true)
				{
					for (var i = 0; i < items.length; i++) {
						items[i].checked =true;
					};
				}else
				{
					for (var i = 0; i < items.length; i++) {
						items[i].checked =false;
					};
				}
			}


			//反选操作
			deselect.onclick = function()
			{
				for (var i = 0; i < items.length; i++) {
					if(items[i].checked == true)
					{
						items[i].checked = false;
					}
					else
					{
						items[i].checked = true;
					}
				};
			}


			//监听全选对象，如果不是全部选中，则全选按钮不选中
			var flag = true ;
			for (var i = 0; i < items.length; i++) {
				items[i].onclick = function()
				{
					for (var i = 0; i < items.length; i++) {
						if(items[i].checked == false)
						{
							flag = false;
							select_all.checked = false;
						}
					};
				}
			};
		}
	</script>
</head>
<body>
	<input type="checkbox" id="select_all">全选
	<input type="checkbox" id="reselect">反选
	<br/><br/>
	<input type="checkbox" class="item">序号1</input>
	<input type="checkbox" class="item">序号2</input>
	<input type="checkbox" class="item">序号3</input>
	<input type="checkbox" class="item">序号4</input>
	<input type="checkbox" class="item">序号5</input>
	<input type="checkbox" class="item">序号6</input>
	<input type="checkbox" class="item">序号7</input>
	<input type="checkbox" class="item">序号8</input>
	<input type="checkbox" class="item">序号9</input>
	<input type="checkbox" class="item">序号10</input>
</body>
</html>

waterport

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript：全选和反选

Javascript数组 window.onload = function() { var select_all = document.getElementById("select_all"); var deselect = document.getElementById("reselect"); var items = document.getElementsByC
复制链接

扫一扫

专栏目录