CODEWITHSUNDEEP
reactjsformscheckboxreact-redux
mehdi hanine
mehdi hanine

Reputation: 113

how to get value of checkbox in react js

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

Upvotes: 3

Views: 11228

Answers (2)

MUCHIRA JUNIOR
MUCHIRA JUNIOR

Reputation: 127

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

Upvotes: 1

Rodrigo Amaral
Rodrigo Amaral

Reputation: 1382

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

Upvotes: 7

Related Questions