js-复选框(全选,反选,不选)

最新推荐文章于 2022-09-05 23:01:20 发布

油焖菜

最新推荐文章于 2022-09-05 23:01:20 发布

阅读量162

点赞数

分类专栏： JavaScript学习

本文链接：https://blog.csdn.net/My_CODEart/article/details/103681206

版权

JavaScript学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.遇到问题:
1.经常把oInput.checked=true ;写成oInput.checked=‘true’;导致功能未实现.
2.关于反选的问题:
将false状态变为true状态,将true状态变为false状态
在这里插入图片描述
2.代码实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function()
{
	//获取button设置点击事件
	var oBtn1=document.getElementById('btn1');
	var oBtn2=document.getElementById('btn2');
	var oBtn3=document.getElementById('btn3');
	var oDiv2=document.getElementById('div1');
	var oInpet=oDiv2.getElementsByTagName('input');
	//全选:不管是否被选中都设置为全部选中
	oBtn1.onclick=function()
	{
	   for(var i=0;i<oInpet.length;i++)
	   {
		   oInpet[i].checked=true;
		}	
	};
	
	//不选:不管是否被选中都设置为不选中
	oBtn2.onclick=function()
	{
	   for(var i=0;i<oInpet.length;i++)
	   {
		   oInpet[i].checked=false;
		}	
	};
	
	//反选:选中的状态设置为不选中,不选中的状态设置为选中
	oBtn3.onclick=function()
	{
	   for(var i=0;i<oInpet.length;i++)
	   {
		  if(oInpet[i].checked==true)
		  {
			  oInpet[i].checked=false;
		  }
		  else{
			 oInpet[i].checked=true;
			  }
		}
	}
}
</script>
</head>
<body>
<input id='btn1' type="button" value="全选"/>
<input id='btn2' type="button" value="不选"/>
<input id='btn3'  type="button" value="反选"/><br />
<div id="div1">
<input type="checkbox"  /><br />
<input type="checkbox"  /><br />
<input type="checkbox"  /><br />
<input type="checkbox"  /><br />
<input type="checkbox"  /><br />
</div>
</body>
</html>

油焖菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-复选框(全选,反选,不选)

1.遇到问题:1.经常把oInput.checked=true ;写成oInput.checked=‘true’;导致功能未实现.2.关于反选的问题:将false状态变为true状态,将true状态变为false状态2.代码实现<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3...
复制链接

扫一扫