How to handle checkbox checked status in reactJS

Question

I have multiple checkbox in my React Class B.js:

<input
   type="checkbox"
   inline={true}
   checked={this.props.checkBoxDefaultStatus}
   onChange={this.handleCheckBoxClick} 
/>

Now the prop checkBoxDefaultStatus is passed from parent class A.js.

A.js

this.state = {
  checkBoxDefaultStatus: false
}

handleMultiSelect() {
    this.setState({
        checkBoxDefaultStatus: true
    })
}

render() {
  <B checkBoxDefaultStatus={this.state.checkBoxDefaultStatus} />
}

EDIT: Now All my child checkboxes are getting checked when I click on parent checkbox, but the issue is that my child checked boxes checked status does not change when I click on them as they are already set by parent prop. I need some way to maintain this also.

This is the behaviour I want https://stackoverflow.com/a/35218069/6574017

might happen due DOM is rendered before the function is called - try running it after DOM is loaded.. — iLuvLogix
– iLuvLogix, Commented Sep 3, 2018 at 8:44

Thilina Sampath · Accepted Answer · 2018-09-03 11:34:36Z

10

If you want change parent component state inside child component, then you have to pass parent component method to child component as props like below,

<B handleCheckBoxClick={this.handleMultiSelect}/>

Check below working code. I build 2 component for your scenario.

class B extends React.Component {
   constructor(){
    super();
    this.state = {
      checkBoxClick : {
        1: false,
        2: false
      }
    }
    this.handleCheckBoxClick = this.handleCheckBoxClick.bind(this);
   }
   
   handleCheckBoxClick(no, event){
    //console.log('no', no);
    //console.log('event.target.value', event);
    var checkBoxClick = this.state.checkBoxClick;
    checkBoxClick[no] = !this.state.checkBoxClick[no];
    this.setState({
      checkBoxClick
    });
    
    var alltrue =Object.keys(checkBoxClick).every((k) =>{ return checkBoxClick[k] });
    //console.log('alltrue', alltrue);
    if(alltrue){
      // console.log('alltrue in if : ', alltrue);
      this.props.handleMultiSelect();
    }
    
    if(this.props.checkBoxDefaultStatus){
      this.props.handleMultiSelect();
    }
   }

  render(){
    //console.log('this.state.checkBoxClick :', this.state.checkBoxClick);
    //console.log('this.props.checkBoxDefaultStatus :', this.props.checkBoxDefaultStatus);
    return(
    <div>
    Child component check-box <br />
      <input
       type="checkbox"
       checked={this.props.checkBoxDefaultStatus ? this.props.checkBoxDefaultStatus : this.state.checkBoxClick[1]}
       onChange={(e) => {this.handleCheckBoxClick(1, e.target.checked)}} 
    /> Bar 1<br />
    <input
       type="checkbox"
       checked={this.props.checkBoxDefaultStatus ? this.props.checkBoxDefaultStatus : this.state.checkBoxClick[2]}
       onChange={(e) => {this.handleCheckBoxClick(2, e.target.checked)}} 
    /> Bar 2<br />
    </div>
    );
  }
}

class A extends React.Component {

  constructor() {
    super();
    this.state = {
      checkBoxDefaultStatus: false
    }
    
    this.handleMultiSelect = this.handleMultiSelect.bind(this);
  }

  handleMultiSelect() {
    //console.log('aaaa')
    this.setState({
      checkBoxDefaultStatus: !this.state.checkBoxDefaultStatus
    })
  }

  render() {
  //console.log('checkBoxDefaultStatus :', this.state.checkBoxDefaultStatus);

    return (
    <div>
      <input type="checkbox" onClick={() => {this.handleMultiSelect()}} checked={this.state.checkBoxDefaultStatus}/>
      Check all<br />
      <B checkBoxDefaultStatus={this.state.checkBoxDefaultStatus}
        handleMultiSelect={()=>{this.handleMultiSelect()}}
      />
      </div>
    );
  }
}

ReactDOM.render( < A / > , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>

edited Sep 3, 2018 at 11:34

answered Sep 3, 2018 at 9:32

Thilina Sampath

3,8097 gold badges43 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

User 101 Over a year ago

I have written exactly the same code, and all my child checkboxes are getting checked when I click on parent checkbox, but the issue is that my child checked boxes checked status does not change when I click on them as they are alreadt set by parent prop. I need some way to maintain this also.

Thilina Sampath Over a year ago

stackoverflow.com/questions/386281/… same scenario do you want

User 101 Over a year ago

yes that's exactly what I want bbut in my case only checkAll works as individualk clicks does not work....how to do this in React

Thilina Sampath Over a year ago

is in your code checkAll in parent component and individual component in child component?

User 101 Over a year ago

Let us continue this discussion in chat.

|

Ali Torki · Accepted Answer · 2018-09-03 09:17:37Z

3

Please using checked prop instead of defaultChecked like this:

<input
   type="checkbox"
   inline={true}
   checked={this.props.checkBoxDefaultStatus}
   onChange={this.handleCheckBoxClick} 
/>

answered Sep 3, 2018 at 9:17

Ali Torki

2,0481 gold badge20 silver badges29 bronze badges

2 Comments

Håken Lid Over a year ago

Use checked for a controlled component and defaultChecked if you want an uncontrolled component. This is an important concept in react, and is explained here: reactjs.org/docs/uncontrolled-components.html "In most cases, we recommend using controlled components to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself."

User 101 Over a year ago

@HåkenLid yeah I understood that but I think it was never the issue, what I want is this behaviour stackoverflow.com/a/35218069/6574017 but in my case since I am setting checked attribute using parent prop the child checkboxes are not unable to change itself.

Indranil · Accepted Answer · 2022-02-28 05:49:17Z

0

Its very simple. Use event.target.checked to know the checkbox status.

Example:

HTML: <input type="checkbox" onClick={(e) => OnCheckboxClick(e)}/> JS:

const OnCheckboxClick= (e) => {
    if(e.target.checked) {
        //blah blah
    }
    else {
       //blah blah
    }
}

answered Feb 28, 2022 at 5:49

Indranil

2,8733 gold badges33 silver badges47 bronze badges

Collectives™ on Stack Overflow

How to handle checkbox checked status in reactJS

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related