Checkbox issue oncheck function

Question

Please see the following code at first. I want the particular checkbox (with id cfc1) to not be shown ticked whenever clicking on it. I have used the onCheck function there. I'm not finding any way to the particular element be shown unchecked whenever clicked on it. I'm trying using the code -

if(e.currentTarget.id === 'cfc1') {
    document.getElementById(e.currentTarget.id).checked = false; 
}

but it's not working.

How to do it using the onCheck function?

import React, {Component} from 'react';
import Checkbox from 'material-ui/Checkbox';

class Checkboxes extends Component {
  constructor() {
     super();
     this.state = {
        checkids:['cfc0', 'cfc1', 'cfc2', 'cfc3']
     };
     this.handleCheck = this.handleCheck.bind(this);
     this.getElements = this.getElements.bind(this);
  }
  getElements() {
     let arr = [];
     this.state.checkids.forEach(function(element) {
        arr.push(
          <Checkbox
             id={element}
             onCheck={this.handleCheck}
          />
        );
     }, this)
     return arr;
  }
  handleCheck(e) {
     console.log(e.currentTarget.id);
     console.log(e.currentTarget.checked);
  }
  render() {
     return(
       <div>
          {this.getElements()}
       </div>
     );
  }
}
export default Checkboxes

Nandu Kalidindi · Accepted Answer · 2017-12-09 10:37:47Z

1

To get it working for your use case, try having a state variable that maintains the checked information of each element id.

And in the onCheck handler toggle the checkbox for all the boxes except the one desired by setting the state.

WORKING DEMO

class App extends Component {
  constructor() {
    super();
     this.state = {
        checkids:{
          'cfc0': false,
          'cfc1': false, 
          'cfc2': false,
          'cfc3': false
        }
     };
  }

  handleCheck(e) {
     const checkids = {...this.state.checkids};
     checkids[e.target.id] = e.target.id === "cfc1" ? false : !checkids[e.target.id];

     this.setState({checkids});
  }

  getElements() {
     let arr = [];
     Object.keys(this.state.checkids).forEach(function(element, index) {
        arr.push(
          <Checkbox
             key={index}
             id={element}
             checked={this.state.checkids[element]}
             onCheck={this.handleCheck.bind(this)}
          />
        );
     }, this)
     return arr;
  }

  render() {
    return (
      <MuiThemeProvider>
        <div>
          {this.getElements()}
       </div>
      </MuiThemeProvider>
    );
  }
}

edited Dec 9, 2017 at 10:37

answered Dec 9, 2017 at 8:51

Nandu Kalidindi

6,2901 gold badge28 silver badges38 bronze badges

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

6 Comments

Subhojit Over a year ago

sorry, I have edited my question a little. how to do it using the onCheck function ?

Subhojit Over a year ago

I'm trying using this code inside the handleCheck function. but it's not working. - if(e.currentTarget.id === 'cfc1') { document.getElementById(e.currentTarget.id).checked = false; }

Nandu Kalidindi Over a year ago

That won't work, because the first time it executes it checks it. I will add an update soon but what is your use case that is requiring you to only do it in the onCheck handler?

Subhojit Over a year ago

yeah. Thanks for your concern friend. That's why just now I have edited the question again. I'm actually having this kind of issue.

Nandu Kalidindi Over a year ago

Updated the answer, please have a look.

|

Bhuwan · Accepted Answer · 2017-12-09 09:26:17Z

0

You can use this.checked = false via javascript

document.getElementById('cfc1').onclick = function() {
  this.checked = false;
}

<label><input type="checkbox" id="cfc1">Click</label>

answered Dec 9, 2017 at 9:26

Bhuwan

16.9k5 gold badges38 silver badges62 bronze badges

2 Comments

Subhojit Over a year ago

Can you do this thing by using the onCheck function event handlers?

Subhojit Over a year ago

I'm trying using this code inside the handleCheck function. but it's not working. - if(e.currentTarget.id === 'cfc1') { document.getElementById(e.currentTarget.id).checked = false; }

Collectives™ on Stack Overflow

Checkbox issue oncheck function

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related