如何解决复选框:复选框全选,取消选择对全部无效
我试图做一个按钮来使用react选中和取消选中所有框,但是由于某种原因,``全选''仅选择了其中三个,而``全选''仅取消选择了三个并选择其余的两个。
我的代码如下:
<button type='button' className='btnSelectAll' onClick={this.selectAllOrNone}>Select All</button>
this.selectAllOrNone = () => {
let events = document.getElementsByClassName('toDoList_checkbox')
let btnSelectAll = document.getElementsByClassName('btnSelectAll')[0]
console.log(events)
for (let i = 0; i < events.length; i++) {
if (btnSelectAll.innerHTML === 'Select All') {
events[i].checked = true
btnSelectAll.innerHTML = 'Unselect All'
}
else if (btnSelectAll.innerHTML === 'Unselect All') {
events[i].checked = false
btnSelectAll.innerHTML = 'Select All'
}
console.log('btnSelectAll')
}
}
任何人都可以提出问题所在吗?在此处输入图片描述
解决方法
您要在for
循环的每个迭代中更改按钮文本,请在完成for
循环后更改文本,因为您在每次迭代中都更改了按钮文本,因此一半将评估为false :
for (let i = 0; i < events.length; i++) {
if (btnSelectAll.innerHTML === 'Select All') {
events[i].checked = true;
}else
//else if (btnSelectAll.innerHTML === 'Unselect All') { //Don't need else-if
events[i].checked = false;
}
}
//Change your button text after the for loop completes
if(btnSelectAll.innerHTML === 'Select All'){
btnSelectAll.innerHTML = 'Unselect All';
}else{
btnSelectAll.innerHTML = 'Select All';
}
,
您正在循环中的if中更改按钮状态。 这意味着您要对每个项目进行不同的检查。更改每个项目之后,尝试在循环外更改“全选”按钮状态。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。