React js Get Multiple Checkbox Value On Submit Example

React js Get Multiple Checkbox Value On Submit Example

React JS get all checked checkbox value on submit. This tutorial guide will explain to you in detail 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

Just follow the following steps and get multiple checkbox value in react js app:

  • Step 1 – Create React App
  • Step 2 – Set up Bootstrap 4
  • 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 4

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;

Note that, CheckboxForm.js component uses a state array to store multiple checkbox values.

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

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *