复选框：复选框全选并取消选择不影响所有答案

【问题标题】：Checkbox: checkbox select all and unselect not effect on all复选框：复选框全选并取消选择不影响所有
【发布时间】：2020-08-24 13:56:02
【问题描述】：

我正在尝试使用 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')
            }
        }

任何人都可以提出问题所在？在此处输入图片描述

【问题讨论】：

请将您的 HTML 发布为minimal reproducible example，以便我们帮助您。在编辑器中使用<> 来制作sn-p。

标签： javascript for-loop if-statement checkbox selectall

【解决方案1】：

您正在更改循环中 if 内的按钮状态。这意味着您正在以不同的方式检查每个项目。尝试在更改每个项目之后更改循环外的“全选”按钮状态。

【讨论】：

【解决方案2】：

您在 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';
}

【讨论】：