Я сделал это в моем проекте React, сценарий немного отличается, но, возможно, это поможет вам .....
Итак, это мой элемент-флажок, который вы можете скопировать в соответствии со своими потребностями:
<input type="checkbox" checked={this.isChecked(props.original.EmployeeId)} onChange={this.singleChange.bind(this, props.original.EmployeeId)}
isChecked = (empId) => {
let checkedItems = this.state.checkItems;
return checkedItems.indexOf(empId) > -1;
}
singleChange = (employeeId, event) => {
let checkedItems = this.state.checkItems;
if (event.target.checked) {
checkedItems.push(employeeId);
}
else {
if (checkedItems.includes(employeeId)) {
let index = checkedItems.indexOf(employeeId);
checkedItems.splice(index, 1);
}
}
checkedItems.length == this.props.employees.length ? this.setState({ allChecked: true }) : this.setState({ allChecked: false })
this.setState({ checkItems: checkedItems })
}
Здесь я поддерживаю массив, который содержит employeeId тех сотрудников, которых я буду проверять, поэтому isChecked - это функция, которая проверяет, проверен ли сотрудник, или, относительно вас, можно сказать, что флажок установлен или нет.
Функция singleChange () вызывается во время события onChange, которое предназначено только для вставки и удаления идентификатора из массива, если установлен или не установлен соответственно.
Но согласно вашему сценарию здесь важна последняя строка кода, которая проверяет, все ли проверены или нет. Таким образом, если вы снимите флажок один все будет снят, если вы установите один за другим все флажки, то флажок (все) будет установлен автоматически. Для (всех) одного флажка вы должны будете поддерживать логическую переменную.
<input type="checkbox" checked={this.state.allChecked} onChange={this.allChecked}></input>
allChecked = (event) => {
const allEmployeeIds = this.props.employees.map(employee => employee.EmployeeId);
if (event.target.checked) {
this.setState({ checkItems: allEmployeeIds });
this.setState({ allChecked: true })
}
else {
this.setState({ checkItems: [] });
this.setState({ allChecked: false });
}
}
Этот элемент ввода выше - мой флажок выбрать все. Проверяется на основе булевой переменной все проверено. Здесь функция allChecked вызывается при возникновении события onChange. Если флажок установлен, эта функция будет помещать все идентификаторы в тот же массив, который использовался выше, а если непроверенный массив будет пустым.
Не путайте с состоянием и другими свойствами, как я сделал это в реакции. Это, возможно, поможет вам. Не стесняйтесь спрашивать, если застряли