In this tutorial guide, you will learn how to get multiple checkboxes values in react js application using HTML input checkboxes and states.
How to Get Multiple Checked Checkbox Values On Submit in React JS
Steps to get multiple checkbox values using states and HTML checkbox:
Step 1 – Create React App
In this step, open your terminal and execute the following command on your terminal to create a new react app:
npx create-react-app my-react-app
To run the React app, execute the following command on your terminal:
npm start
Check out your React app on this URL: localhost:3000
Step 2 – Install and Set up Bootstrap
In this step, execute the following command to install bootstrap library into your react app:
npm install bootstrap --save
Set up bootstrap.min.css file in src/App.js file:
import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<!-- something here -->
</div>
);
}
export default App;
Step 3 – Create Checkbox Form Component
Goto src directory of your react js app, create a checkbox form component named CheckboxForm.js, and then Create HTML checkbox input and store the corresponding value in states:
import React from 'react'
class CheckboxForm extends React.Component{
constructor(){
super();
this.state = {
hobbies:[]
}
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
var value = target.value;
if(target.checked){
this.state.hobbies[value] = value;
}else{
this.state.hobbies.splice(value, 1);
}
}
submit(){
console.warn(this.state)
}
render(){
return(
<div>
<div class="row">
<div class="col-md-6 offset-md-3">
<br /><br />
<h3>To Get Multiple Checked Checkbox Values On Submit in React JS - Tutsmake.com</h3><br />
<div class="form-row">
<div class="form-group col-md-6">
<label>Hobbies :</label><br />
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="hobbies" id="inlineCheckboxh1" value="1" onChange={this.handleInputChange} />
<label class="form-check-label" for="inlineCheckboxh1">Reading</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="hobbies" id="inlineCheckboxh2" value="2" onChange={this.handleInputChange} />
<label class="form-check-label" for="inlineCheckboxh2">Developing</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="hobbies" id="inlineCheckboxh3" value="3" onChange={this.handleInputChange} />
<label class="form-check-label" for="inlineCheckboxh3">Desiging</label>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-primary" onClick={()=>this.submit()}>Submit</button>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default CheckboxForm;
Step 4 – Add Component in App.js
In this step, you need to add CheckboxForm.js file in src/App.js file:
import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import CheckboxForm from './CheckboxForm'
function App() {
return (
<div className="App">
<CheckboxForm/>
</div>
);
}
export default App;
Conclusion
React JS get all checked checkbox value on submit. In this tutorial, you have learned in detail how to get multiple checkbox values in react js app with bootstrap form.
