2

I created checkbox component using ant design .If I click check all box then i need to auto trigger checkbox group items

Here my code

 constructor(props) {
    super(props);
    this.state = {
        checkedList: [],
        checkAll: false,
    };
}

 <Checkbox onChange={this.onCheck}
           checked={this.state.checkAll} value={10}>check all</Checkbox>
  <Checkbox.Group onChange={this.onGroupChange} value={this.state.checkedList} style={{ width: '100%',marginLeft:'5%',fontWeight:'lighter' }}>
         <Checkbox value={101}>option 1</Checkbox> <br />
         <Checkbox value={102}>option 2</Checkbox>
 </Checkbox.Group>



onCheck =(e)=>{
    this.setState({
        checkAll: e.target.checked,
    });
    ;
}
onGroupChange=(checkedList)=>{
    this.setState({
        checkedList,
        checkAll: checkedList,
    });
}

Can u help me?

1 Answer 1

4

In your code sample, the onCheck function doesn't change any checkedlist.You are just changing checkAll state to true. So it is not updating the checkboxes. Here is my two different solution's for your problem.

const onloadOptions = [
  { label: 'option 1', value: 101 },
  { label: 'option 2', value: 102 }
];

class App extends React.Component {
  constructor(props) {
    super(props);
      this.state = {
        checkedList: [],
        checkAll: false,
      };
  }

  onCheck = (e) => {
    const values= onloadOptions.map(record => record.value)
    this.setState({
      checkAll: e.target.checked,
      checkedList: e.target.checked ? values : [],
    });
    ;
  }

  onGroupChange = (checkedList) => {
    this.setState({
      checkedList,
      checkAll: checkedList.length === onloadOptions.length,
    });
  }

  render() {
    console.log();
    return (
      <div>
        <Checkbox onChange={this.onCheck}
          checked={this.state.checkAll} >check all</Checkbox>
        <Checkbox.Group options={onloadOptions} onChange={this.onGroupChange} value={this.state.checkedList} style={{ width: '100%', marginLeft: '5%', fontWeight: 'lighter' }}>

          </Checkbox.Group>
      </div>
    );
  }


}

and this is similar to your approach but as we cant predict number of options, I would opt for above way instead of below one.

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      checkedList: [],
      checkAll: false,
    };
  }

  render() {
    return (
      <div>
        <div style={{ borderBottom: '1px solid #E9E9E9' }}>
          <Checkbox
            onChange={this.onCheck}
            checked={this.state.checkAll}
          >
            Check all
          </Checkbox>
        </div>
        <br />
        <Checkbox.Group value={this.state.checkedList} onChange={this.onGroupChange} >
          <Checkbox value={101}>option 1</Checkbox>
          <Checkbox value={102}>option 2</Checkbox>
        </Checkbox.Group>
      </div>
    );
  }

  onGroupChange = (checkedList) => {
    this.setState({
      checkedList,
    });
  }

  onCheck = (e) => {
    this.setState({
      checkedList: e.target.checked ? [101,102] : [],
      checkAll: e.target.checked,
    });
  }
}
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.