项目场景:
网上调查上较为常见的多选,全不选和反选
问题描述:
使用以下代码时,全选和全不选都是正常,而反选却并没有想要的效果
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
暂时还不知道具体原因是什么,如有大佬指点,那感情好