您的位置：首页 > Web前端 > JavaScript

JS-案例-Checkbox全选

2015-09-03 12:48 555 查看

//需求: 若 #checkedAll_2 被选中, 则 name=items 的 checkbox 都被选中

//若 #checkedAll_2 取消选中, 则 name=items 的 checkbox 都取消选中

//若 name=items 的 checkbox 都被选中, 则 #checkedAll_2 的 checkbox 也被选中

//若 name=items 的 checkbox 有一个没有被选中, 则 #checkedAll_2 取消选择.

//提示: 事件需要加给 #checkedAll_2, 获取 name=items 的 checkbox 数组

//判断是否被选中, 若被选择, 则 name=items 的 checkbox 都要被选择

//若没有被选择, 则 name=items 的 checkbox 都要取消选择

//根据是否存在 checked 属性来判断是否被选择, 可以使其 checked = true 被选择

//checked = false 取消选择.

//还需要给每个 name=items 的 checkbox 加响应函数

//判断 name=items 的 checkbox 是否都被选中: 选择的个数和总个数是否相等.

//若都被选择: 则使 #checkedAll_2 被选择

//若没有都被选择: 则使 #checkedAll_2 取消选择

实现代码：

<!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>Insert title here</title>

<script type="text/javascript">
	window.onload = function()
	{
		//实现全选，不全选
		document.getElementById("checkedAll_2").onclick = function()
		{
			var flag = this.checked;
			var items = document.getElementsByName("items");
			
			for(var i=0;i<items.length;i++)
			{
				items[i].checked = flag;
			}
		};
		//为每一个item增加监听，当所有的复选框被选中 全选框也被选中
		var items = document.getElementsByName("items");
		for(var j=0;j<items.length;j++)
		{
			
			items[j].onclick = function()
			{
				var number = 0;
				for(var k=0;k<items.length;k++)
				{
					if(items[k].checked)
					{
						number++;
					}
				}
				document.getElementById("checkedAll_2").checked = (items.length==number);
			};
		}
		
		//全选按钮
		document.getElementById("CheckedAll").onclick = function()
		{
			var items = document.getElementsByName("items");
			
			for(var i=0;i<items.length;i++)
			{
				items[i].checked = true;
			}
		};
		//全不选按钮
	   document.getElementById("CheckedNo").onclick = function()
		{
			var items = document.getElementsByName("items");
			
			for(var i=0;i<items.length;i++)
			{
				items[i].checked = false;
			}
		};
		//反选按钮
		document.getElementById("CheckedRev").onclick = function()
		{
			var items = document.getElementsByName("items");
			
			for(var i=0;i<items.length;i++)
			{
				items[i].checked = !items[i].checked;
			}
		};
		//提交按钮
		document.getElementById("send").onclick = function()
		{
			var items = document.getElementsByName("items");
			
			for(var i=0;i<items.length;i++)
			{
				if(items[i].checked)
				{
					alert(items[i].value);
				}
			}
		};
		
	};

</script>

</head>
<body>

	<form method="post" action="">
		你爱好的运动是？<input type="checkbox" id="checkedAll_2" />全选/全不选 
		
		<br /> <input type="checkbox" name="items" value="足球" />足球 
		       <input type="checkbox"name="items" value="篮球" />篮球
		       <input type="checkbox" name="items"value="羽毛球" />羽毛球
		       <input type="checkbox" name="items" value="乒乓球" />乒乓球
		<br /> <input type="button" id="CheckedAll" value="全　选" />
		       <input type="button" id="CheckedNo" value="全不选" /> 
		       <input type="button"id="CheckedRev" value="反　选" />
		       <input type="button" id="send" value="提　交" />
	</form>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航