react-checkbox-group是否支持选中组件内所有选项的功能？

完全可以实现该需求，react-checkbox-group为受控组件，选中状态完全由传入的value属性控制，只需将所有选项的value值批量传入value数组即可触发全选。

实现步骤 #

• 先整理CheckboxGroup内部所有子Checkbox的value值，存储为统一的数组
• 编写全选切换逻辑，判断当前选中数量是否等于总选项数量，切换时传入全量value或者空值
• 按需添加全选触发入口（如全选按钮、独立全选框）

代码示例 #

逻辑部分 #

// 替换为你实际业务中的所有Checkbox子项的value值
const allOptions = ["value1", "value2", "value3", "value4"];

// 全选状态判断
const isAllSelected = input.value 
  ? input.value.split(",").length === allOptions.length 
  : false;

// 全选切换函数
const toggleSelectAll = () => {
  input.onChange(isAllSelected ? "" : allOptions.join(","));
};

调整后的CheckboxGroup代码 #

你原代码中的checked={"true"}为冗余属性，该组件不通过该属性控制选中状态，可直接删除：

<CheckboxGroup
  className={
    data.singleColumn
      ? styles.MultiCheckboxFieldSingle
      : styles.MultiCheckboxField
  }
  checkboxDepth={2} // 保持你原有的性能优化配置
  name={input.name}
  value={input.value ? input.value.split(",") : []}
  onChange={(val) => {
    input.onChange(val.join());
    console.log("val = ", val);
  }}
>
  {/* 此处保留你原有写的Checkbox子项即可，注意子项value要和allOptions里的值一一对应 */}
</CheckboxGroup>

{/* 全选触发按钮，可根据需求调整样式 */}
<button onClick={toggleSelectAll}>
  {isAllSelected ? "取消全选" : "全选"}
</button>

注意事项 #

• 确保allOptions数组的内容和所有子Checkbox的value属性完全一致，否则全选逻辑会出现异常
• 如果选项为动态拉取的内容，只需在拉取到选项列表后同步更新allOptions的值即可

内容的提问来源于stack exchange，提问作者Senthilnathan