js复选框

最新推荐文章于 2023-06-07 15:02:43 发布

花开一夜

最新推荐文章于 2023-06-07 15:02:43 发布

阅读量1.7k

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/m0_50726623/article/details/117749874

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

全选

checkedAllBtn.onclick=function(){
					for(var i=0;i<items.length;i++){
						items[i].checked=true;
					}
					//将全选/全不选设置为选中
					checkedAllBox.checked=true;
				}

全不选

checkedNoBtn.onclick=function(){
					for(var i=0;i<items.length;i++){
						items[i].checked=false;
					}
					checkedAllBox.checked=false;
				}

反选

checkedRevBtn.onclick=function(){
					checkedAllBox.checked=true;
					for(var i=0;i<items.length;i++){
						items[i].checked=!items[i].checked;
						if(!items[i].checked){
							checkedAllBox.checked=false;
						}
					}	
				}

提交

sendBtn.onclick=function(){
					for(var i=0;i<items.length;i++){
						if(items[i].checked){
							alert(items[i].value);
						}
					}					
				}

全选/全不选

checkedAllBox.onclick=function(){
					for(var i=0;i<items.length;i++){
						items[i].checked=checkedAllBox.checked;
					}
				}

全选/全不选功能完善

for (var i=0;i<items.length;i++) {
	items[i].onclick=function(){
		checkedAllBox.checked=true;
		for(var j=0;j<items.length;j++){
		   if(!items[j].checked){
		   checkedAllBox.checked=false;
				break;
							}
						}
					}	
				}

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
			<script type="text/javascript">
			window.onload=function(){
				var items=document.getElementsByName("items");
				var checkedAllBtn=document.getElementById("checkedAllBtn");
				var checkedNoBtn=document.getElementById("checkedNoBtn");
				var checkedRevBtn=document.getElementById("checkedRevBtn");
				var sendBtn=document.getElementById("sendBtn");
				var checkedAllBox=document.getElementById("checkedAllBox");
				//全选
				checkedAllBtn.onclick=function(){
					for(var i=0;i<items.length;i++){
						items[i].checked=true;
					}
					//将全选/全不选设置为选中
					checkedAllBox.checked=true;
				}
				//全不选
				checkedNoBtn.onclick=function(){
					for(var i=0;i<items.length;i++){
						items[i].checked=false;
					}
					checkedAllBox.checked=false;
				}
				//反选
				checkedRevBtn.onclick=function(){
					checkedAllBox.checked=true;
					for(var i=0;i<items.length;i++){
						items[i].checked=!items[i].checked;
						if(!items[i].checked){
							checkedAllBox.checked=false;
						}
					}	
				}
				//提交
				sendBtn.onclick=function(){
					for(var i=0;i<items.length;i++){
						if(items[i].checked){
							alert(items[i].value);
						}
					}					
				}
				//全选/全不选
				checkedAllBox.onclick=function(){
					for(var i=0;i<items.length;i++){
						items[i].checked=checkedAllBox.checked;
					}
				}
				//全选/全不选的完善
				for (var i=0;i<items.length;i++) {
					items[i].onclick=function(){
						checkedAllBox.checked=true;
						for(var j=0;j<items.length;j++){
							if(!items[j].checked){
								checkedAllBox.checked=false;
								break;
							}
						}
					}	
				}
};	
			</script>
	</head>
	<body>
		<form method="post" action="">
			你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
			<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="checkedAllBtn" value="全选"/>
			<input type="button" id="checkedNoBtn" value="全不选"/>
			<input type="button" id="checkedRevBtn" value="反选"/>
			<input type="button" id="sendBtn" value="提交"/>	
		</form>
	</body>
</html>

花开一夜

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js复选框

效果图全选checkedAllBtn.onclick=function(){ for(var i=0;i<items.length;i++){ items[i].checked=true; } }全不选checkedNoBtn.onclick=function(){ for(var i=0;i<items.length;i++){ items[i].checked=false; } }反选check
复制链接

扫一扫