how to get value of checkbox in react js

Question

I am trying to retrieve the check value of my checkbox but i get null value this is my code

<form onSubmit={this.onSubmit}>
<fieldset>
<legend>RFX/RFP:</legend>
<div className="form-check">
  <input type="checkbox" className="form-check-input" onChange={this.onChange}  value={this.state.rfx} name="rfx" id="rfx" />
  <label className="form-check-label"  name="rfx">RFX</label>
  &nbsp; &nbsp; &nbsp; &nbsp;

  <input type="checkbox" className="form-check-input" onChange={this.onChange}  value={this.state.rfp}  name="rfp" id="rfp"  />
  
  <label className="form-check-label" >RFP</label>
  &nbsp; &nbsp; &nbsp; &nbsp;

  <input type="checkbox" className="form-check-input" onChange={this.onChange}  value={this.state.rfp_x}  name="rfp(x)" id="rfp(x)"/>
  <label className="form-check-label" >RFP(X)</label>
  &nbsp; &nbsp; &nbsp; &nbsp;


  <input type="checkbox" className="form-check-input"  onChange={this.onChange}name="all" id="all" />
  <label className="form-check-label"  name="all" id="all">ALL</label>
</div>
</form>

and my methods :

constructor(props){
    super(props)
    this.state={
      rfp:"",
      rfx:"",
      rfp_x:"",
      all:"",
    
 
    }
    this.onChange =  this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
   }
  onChange(e){
    this.setState({[e.target.name] : e.target.value});}
  onSubmit(e){
    e.preventDefault();
    const FilterRegion={
  
      rfx:this.state.rfx,
      rfp:this.state.rfp,
      rfp_x:this.state.rfp_x,
      all:this.state.all,
    }
    console.log(FilterRegion)
   }

and the screen when i submit my form :

https://gyazo.com/32a24813545ebf7d3a48b72be724a76f

please I try to solve my problem and display the value or the name of my check box! what do I have to do

Rodrigo Amaral · Accepted Answer · 2020-07-31 22:23:50Z

7

When using controlled components, you don't get the value, you simply give it to the HTML: your javascript state is the source of truth. That said, you should make the following changes:

use booleans for checkbox values:

this.state = {
  rfp: false,
  rfx: false,
  rfp_x: false,
  all: false
};

use event.target.checked instead of event.target.value:

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

Demo: https://codesandbox.io/s/polished-bush-5mf1n?file=/src/App.js

answered Jul 31, 2020 at 22:23

Rodrigo Amaral

1,4121 gold badge14 silver badges19 bronze badges

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

2 Comments

Rohit Verma Over a year ago

If i need to use both "event.target.checked" & "event.target.value" then how can use it?

Rodrigo Amaral Over a year ago

You can use const { name, checked, value } = event.target and use the name, checked and value variables

MUCHIRA JUNIOR · Accepted Answer · 2021-08-16 12:01:58Z

1

using react first setState

 var [value,setvalue]=useState(false)

<div className="form-check">
        <input className="form-check-input" checked={value} onChange={(e)=>setValue(e.target.checked)} type="checkbox"  />
       <label className="form-check-label">chechbox value</label>
       {value}
     </div>

note i am using react and bootstrap css

answered Aug 16, 2021 at 12:01

MUCHIRA JUNIOR

1271 silver badge7 bronze badges

2 Comments

Jason Lim Ji Chen Over a year ago

It doesn't work for me, the checkbox stays checked

MUCHIRA JUNIOR Over a year ago

use onChange={(e)=>setValue(!value)}

Collectives™ on Stack Overflow

how to get value of checkbox in react js

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related