How To Get Multiple Checkbox Value In React JS

Selected checkboxes: {this.state.checkboxValues.join(“, “)}

React JS get all checked checkbox value. In this tutorial, you will learn how to get multiple checkboxes values in react js app with bootstrap form.

Sometimes, you work with forms with checkboxes fields in react js app. And at that time, you want to get all checked checkbox values on submitting in react js app. So, in this example tutorial will learn step by step how to get multiple checkbox values in react js app.

And this example tutorial will show that how you can get checked values from react multiple checkboxes.

How to Get Multiple Checked Checkbox Values On Submit in React JS

Use the following steps to get multiple checkbox value in react js app:

• Step 1 – Create React App
• Step 2 – Set up Bootstrap
• Step 3 – Create Checkbox Form Component
• Step 4 – Add Component in App.js

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 – Set up Bootstrap

In this step, execute the following command to install boostrap 4 library into your react app:

npm install bootstrap --save

Add 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

In this step, visit src directory of your react js app and create a checkbox form component named CheckboxForm.js. And add the following code into it:

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;

Here is breakdown of above given code:

• The first line of the code imports the React library, which is required to use the React component model.
• The class CheckboxForm extends the React.Component class, which means that it is a reusable component that can be rendered in any part of the application.
• In the constructor method of the class, a state object is defined with an empty array hobbies. The state is used to store the data that changes during the component’s lifecycle.
• The handleInputChange method is used to handle the changes in the checkboxes’ values. It receives an event object that contains information about the checkbox that was changed. The method checks if the checkbox is checked, and if it is, it adds the value to the hobbies array. If it is unchecked, it removes the value from the hobbies array.
• The submit method is called when the user clicks on the “Submit” button. It logs the hobbies state object to the console.
• In the render method, the component’s UI is defined using JSX, a syntax extension to JavaScript that allows the developer to write HTML-like code within JavaScript. The form contains three checkboxes for hobbies, with their corresponding labels. The checkboxes are defined with the form-check-input class, and their values and change events are bound to the handleInputChange method.
• Finally, the component is exported as the default export, which means that it can be imported and used in other parts of the application.

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.

Recommended React JS Post