CODEWITHSUNDEEP
reactjs
BKK
BKK

Reputation: 503

How to select only one checkbox in Reactjs

I need to select only one checkbox with other being un-selected at a time in reactJS

createElement('div', {className: 'checkbox'},
  createElement('label', null,
    createElement('input', {
      type: 'checkbox',
      name: 'tssort',
      defaultChecked: !this.state.head,
      onChange: this.sorter
    }), 'Sort by action'),
    createElement('label', null,
      createElement('label', null,
        createElement('input', {
          type: 'checkbox',
          name: 'tssort',
          defaultChecked: this.state.head,
          onChange: this.sorter
        }),
     'Sort by Re-action')
    )
 ),

In the this.sorter, I'm using this.setState to set the values to the checkbox, I tried assigning the same name to both the checkbox and assign only one value at a time. But which is not fruitful at least from my end. Guide me how to sort it out.

Upvotes: 3

Views: 13498

Answers (4)

Rohith Murali
Rohith Murali

Reputation: 5669

You can use the setState to set the checked field and alter the states onChange. 

constructor(){
this.state = {
 checked = 'first',
}
}



 sorter(checkedItem){
      this.setState({checked:checkedItem});
    }

createElement('div', {className: 'checkbox'},
        createElement('label', 'first',
          createElement('input', {
            type: 'checkbox',
            name: 'tssort',
            checked : this.state.checked==='first',
            onChange: function(){this.sorter('second')},
            }),
                'Sort by action'
              ),

    createElement('label', 'second',
      createElement('input', {
        type: 'checkbox',
        name: 'tssort',
        checked : this.state.checked==='second',
        onChange: function(){this.sorter('second')},
        }),
            'Sort by Re-action'
          )
    )

    ),

Upvotes: 1

Ragnar
Ragnar

Reputation: 2690

If you want to do a selectionable list where only one can be selected the best in term of UX is to use radio button.

Upvotes: 4

supra28
supra28

Reputation: 1636

You can give different names to both the checkboxes and then make your sorter function like this:

sorter(e){
  this.setState({[e.target.name]:e.target.checked})
}

then you can access the state using

this.state.nameOfTheCheckBox

Also, if you can't use ES6 computed property names you can use the following code:

 sorter(e){
   var partialState = {};
   partialState[e.target.name] = e.target.value;
   this.setState(partialState);
   }

Upvotes: 0

Roopak Puthenveettil
Roopak Puthenveettil

Reputation: 1475

instead of using state you can go for ref. https://reactjs.org/docs/refs-and-the-dom.html

constructor(){
this.head=false;
}



  sorter(){
     this.refs.Sortbyaction.checked=!this.head;
     this.head=!this.head;
    }

createElement('label', null,
      createElement('input', {
        type: 'checkbox',
        name: 'tssort',
        ref:'Sortbyaction',
        defaultChecked: !this.state.head,
        onChange: this.sorter
        }),
            'Sort by action'
          )

Upvotes: 1

Related Questions