復選框：復選框全選和取消選擇不影響所有

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 內更改按鈕狀態。 這意味着您正在以不同的方式檢查每個項目。 嘗試在循環外更改“全選”按鈕狀態，就在更改每個項目之后。