在组件中创建选择所有复选框功能

state = {
  selectAll: false,
  checkboxes: [
    { id: 1, label: '复选框1', checked: false },
    { id: 2, label: '复选框2', checked: false },
    { id: 3, label: '复选框3', checked: false },
    // 添加更多的复选框...
  ]
};

render() {
  return (
    <div>
      <input type="checkbox" checked={this.state.selectAll} onChange={this.handleSelectAll} /> 选择所有复选框
      {this.state.checkboxes.map(checkbox => (
        <div key={checkbox.id}>
          <input type="checkbox" checked={checkbox.checked} onChange={() => this.handleCheckboxChange(checkbox.id)} /> {checkbox.label}
        </div>
      ))}
    </div>
  );
}

handleSelectAll = () => {
  const { checkboxes, selectAll } = this.state;
  
  // 反转全选状态
  const updatedCheckboxes = checkboxes.map(checkbox => ({
    ...checkbox,
    checked: !selectAll
  }));

  this.setState(prevState => ({
    checkboxes: updatedCheckboxes,
    selectAll: !prevState.selectAll
  }));
};

handleCheckboxChange = (checkboxId) => {
  const { checkboxes } = this.state;

  const updatedCheckboxes = checkboxes.map(checkbox => {
    if (checkbox.id === checkboxId) {
      return {
        ...checkbox,
        checked: !checkbox.checked
      };
    }
    return checkbox;
  });

  this.setState({
    checkboxes: updatedCheckboxes
  });
};

// 获取所有选中的复选框
const selectedCheckboxes = this.state.checkboxes.filter(checkbox => checkbox.checked);
console.log(selectedCheckboxes);