JS踩坑——1.0多选按钮，全不选按钮，反选按钮例子

尖兵果子

已于 2022-02-24 16:26:38 修改

阅读量423

点赞数

分类专栏： JS 文章标签： javascript css css3

于 2022-02-24 16:21:08 首次发布

本文链接：https://blog.csdn.net/wfy17030212/article/details/123111873

版权

JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

项目场景：

网上调查上较为常见的多选，全不选和反选

问题描述：

使用以下代码时，全选和全不选都是正常，而反选却并没有想要的效果


function selectAll()				
{
	var boxGroups=document.getElementsByTagName('input');								
	
	for(let i=0;i<boxGroups.length;i++)				
	{
		boxGroups[i].checked='checked';					
	}
}

function selectNotAll()
{
	var boxGroups=document.getElementsByTagName('input');								
	
	for(let i=0;i<boxGroups.length;i++)				
	{
		boxGroups[i].checked='';					
	}
}

function selectRestOfAll()
{
	var boxGroups=document.getElementsByTagName('input');								
	
	for(let i=0;i<boxGroups.length;i++)				
	{
		if(boxGroups[i].checked=='checked')
		{
			boxGroups[i].checked='';
		}
		else{
			boxGroups[i].checked='checked';
		}									
	}
}

<body>		
		<ul>
			<button onclick="selectAll()">全选</button>
			<button onclick="selectNotAll()">全不选</button>
			<button onclick="selectRestOfAll()">反选</button>
			<li><input type="checkbox"/></li>
			<li><input type="checkbox"/></li>
			<li><input type="checkbox"/></li>
			<li><input type="checkbox"/></li>
			<li><input type="checkbox"/></li>
			<li><input type="checkbox"/></li>
		</ul>
	</body>

原因分析：

这里多选和全不选的思路就是，获取到所有input标签，其实就是一个数组，通过getElementsByTagName

坑点1：getElements,这一类方法，只要是带s的，返回的就是数组的形式

checkbox拥有checked属性，当checked='checked'时，代表该框被选中

坑点2：boxGroups[i].checked=='checked'这样不能作为判断条件

解决方案：

将if(boxGroups[i].checked=='checked')改成boxGroups[i].checked==true

暂时还不知道具体原因是什么，如有大佬指点，那感情好

尖兵果子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
JS踩坑——1.0多选按钮，全不选按钮，反选按钮例子

项目场景：网上调查上较为常见的多选，全不选和反选问题描述：function selectRestOfAll(){ var boxGroups=document.getElementsByTagName('input'); for(let i=0;i<boxGroups.length;i++) { if(boxGroups[i].checked=='checked') { boxGroups[i].checked=''; } else{
复制链接

扫一扫