How to select only one checkbox in Reactjs

Question

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.

Ragnar · Accepted Answer · 2018-05-28 08:00:26Z

4

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.

answered May 28, 2018 at 8:00

Ragnar

2,7048 gold badges46 silver badges79 bronze badges

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

Comments

Rohith Murali · Accepted Answer · 2018-05-28 10:52:54Z

1

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'
          )
    )

    ),

edited May 28, 2018 at 10:52

answered May 28, 2018 at 7:10

Rohith Murali

5,6692 gold badges27 silver badges28 bronze badges

2 Comments

BKK Over a year ago

When I tried to modify my code as per the above changes I'm ending up with following : "Shorthand property assignments are valid only in destructuring patterns".Is there anything to include in my code.

Rohith Murali Over a year ago

May be the arrow functions are not allowed in your code I have edited it to old style function(){}, btw why are you not using the JSX kind of format?

Roopak Puthenveettil · Accepted Answer · 2018-05-28 06:58:44Z

1

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'
          )

answered May 28, 2018 at 6:58

Roopak Puthenveettil

1,5052 gold badges14 silver badges28 bronze badges

Comments

supra28 · Accepted Answer · 2018-05-28 07:51:51Z

0

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);
   }

answered May 28, 2018 at 7:51

supra28

1,64610 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to select only one checkbox in Reactjs

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related