How to enable multiple check an enable unCheck in radio button?

Question

I have enable mutilple check for radio button. But how to enable unCheck

<div id ="box"></div>
<script type="text/babel">

    class Radio extends React.Component{
    constructor(props) {
    super(props);
    this.state = {option: 'a'};
    }
     setRadio(e){
        this.setState({option: e.target.value});     
     }
      render(){
         return(<div>   
          <div onChange={this.setRadio.bind(this)}  >      
          <b>Select :</b> <br />
          <input type="radio" value="a" name="a"/>a
          <input type="radio" value="b" name="b"/>b
          <input type="radio" value="c" name="c"/>c
          <input type="radio" value="d" name="d"/>d
          <input type="radio" value="e" name="e"/>e
      </div>
      </div>);
      }
    }

    ReactDOM.render(<Radio /> , document.getElementById('box'));
</script>

I wasn't able to add unCheck option. I just need what should I add to the method setRadio(e) to enable uncheck. Thanks for help

you want to select only one option at a time correct or multiple selection ? — Mayank Shukla, Jun 08 '17 at 09:51

score 3 · Accepted Answer · answered Jun 08 '17 at 10:12

From what I can understand, you want to check multiple radio buttons, In that case you should make use of checkboxes rather than radio buttons and have an onChange on each checkbox rather than the div

class Checkbox extends React.Component{
constructor(props) {
super(props);
this.state = {option: {
    'a': false,
    'b': false,
    'c': false,
    'd': false,
    'e': false
}};
}
 setCheckbox(val){
   var option = {...this.state.option}
   option[val]= !option[val]
    this.setState({option});     
 }
  render(){
     return(<div>   
      <div  >      
      <b>Select :</b> <br />
      <input type="checkbox" onChange={()=> this.setCheckbox('a')} value="a" name="a" checked={this.state.option['a']}/>a
      <input type="checkbox" onChange={()=> this.setCheckbox('b')} value="b" name="b" checked={this.state.option['b']}/>b
      <input type="checkbox" onChange={()=> this.setCheckbox('c')} value="c" name="c" checked={this.state.option['c']}/>c
      <input type="checkbox" onChange={()=> this.setCheckbox('d')} value="d" name="d" checked={this.state.option['d']}/>d
      <input type="checkbox" onChange={()=> this.setCheckbox('e')} value="e" name="e" checked={this.state.option['e']}/>e
  </div>
  </div>);
  }
}

ReactDOM.render(<Checkbox /> , document.getElementById('box'));

<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 ="box"></div>

Small doubt. What is the purpose of `...this.state.option` why is `...' used — Kangkan, Jun 08 '17 at 10:28
if you directly say var option = this.state.option, then option variable will refer to the state variable itself, and hence with mutate the state which we don't want. read this on more info for `...` operator which is called a spread operator https://stackoverflow.com/questions/42811882/what-is-the-meaning-of-this-syntax-x-in-reactjs/42811937#42811937 — Shubham Khatri, Jun 08 '17 at 10:51

How to enable multiple check an enable unCheck in radio button?

1 Answers1