javascript ：复选框的单选，全选，全不选，反选。

最新推荐文章于 2023-05-20 08:42:36 发布

wang_gmail

最新推荐文章于 2023-05-20 08:42:36 发布

阅读量659

点赞数

分类专栏： Web前端文章标签： checkbox 的单选反选全选全不选

本文链接：https://blog.csdn.net/wang_gmail/article/details/29361737

版权

Web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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;
			}
		}
		
		
		var items = document.getElementsByName("items");
		for(var i = 0 ; i < items.length ; i ++){
			items[i].onclick = function(){
				var number = 0;
				for(var j = 0 ; j < items.length ; j ++){
				if(items[j].checked){
					number++;
				}
			}
			document.getElementById("checkedAll_2").checked = 
				(items.length == number);
			}
		}
		document.getElementById("CheckedAll").onclick = function(){
			for(var i = 0; i<items.length;i++){
			items[i].checked = true;
		}
	}
		document.getElementById("CheckedNo").onclick = function(){
			for(var i = 0; i<items.length;i++){
			items[i].checked = false;
		}
	}
		document.getElementById("CheckedRev").onclick = function(){
			for(var i = 0; i<items.length;i++){
			items[i].checked = !items[i].checked;
		}
	}
		document.getElementById("send").onclick = function(){
			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>

wang_gmail

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript ：复选框的单选，全选，全不选，反选。

Insert title here //需求: 若 #checkedAll_2 被选中, 则 name=items 的 checkbox 都被选中 //若 #checkedAll_2 取消选中, 则 name=items 的 checkbox 都取消选中 //若 name=items 的 checkbox 都被选中, 则 #checkedAll_2 的 checkbox 也被选中 /
复制链接

扫一扫