复选框：复选框全选和取消选择不影响所有

Question

我正在尝试做一个按钮来使用 react.but 来检查和取消选中所有框。但出于某种原因，“全选”仅选择其中三个，而“取消全选”仅取消选择这三个并选择其余两个。

我的代码如下：

<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')
            }
        }

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

Answer 1

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

Answer 2

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