initialization is all checked by default, and it is found that the top-level check is not on
.https://codepen.io/pen/?editors=0010the following is the official demo code of antd
const { Checkbox } = antd;
const CheckboxGroup = Checkbox.Group;
const plainOptions = ["Apple", "Pear", "Orange"];
const defaultCheckedList = ["Apple", "Pear", "Orange"];
class App extends React.Component {
state = {
checkedList: defaultCheckedList,
indeterminate: true,
checkAll: false,
};
render() {
return (
<div>
<div style={{ borderBottom: "1px solid -sharpE9E9E9" }}>
<Checkbox
indeterminate={this.state.indeterminate}
onChange={this.onCheckAllChange}
checked={this.state.checkAll}
>
Check all
</Checkbox>
</div>
<br />
<CheckboxGroup options={plainOptions} value={this.state.checkedList} onChange={this.onChange} />
</div>
);
}
onChange = (checkedList) => {
this.setState({
checkedList,
indeterminate: !!checkedList.length && (checkedList.length < plainOptions.length),
checkAll: checkedList.length === plainOptions.length,
});
}
onCheckAllChange = (e) => {
this.setState({
checkedList: e.target.checked ? plainOptions : [],
indeterminate: false,
checkAll: e.target.checked,
});
}
}
ReactDOM.render(<App />, mountNode); 