How To Get Multiple Checkbox Value In React JS

Websolutionstuff | Aug-29-2022 | Categories : React JS

In this article, we will see how to get multiple checkbox values in react js. In react, js click on the submit button and get the multiple checkbox values. Retrieve all checkbox values in react js. 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, let's see how to get checkbox values in react js or react js to get multiple checkbox values.

Step 1: Create React JS App

Step 2: Setup Bootstrap 4

Step 3: Create Checkbox Form Component

Step 4: Add Component in App.js

 

Step 1: Create React JS App

In this step, we will 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

 

 

Step 2: Setup Bootstrap 4

In this step, we will install the bootstrap 4 libraries into your react app.

npm install bootstrap --save

Add the bootstrap.min.css file to src/App.js the file.

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
function App() {
  return (
    <div>
      <!-- Code here -->
    </div>
  );
}
 
export default App;

 

Step 3: Create Checkbox Form Component

In this step, we will create a checkbox form component named CheckboxForm.js.

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>How To Get Multiple Checkbox Value In React JS - Websolutionstuff</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">Cricket</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">Reading</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">Cooking</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, we need to add the 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;

 


You might also like:

Recommended Post
Featured Post
How To Remove Specific Item From Array In Javascript
How To Remove Specific Item Fr...

In this article, we will see how to remove a specific item from an array in javascript. We will use the indexOf() m...

Read More

Nov-03-2022

How to Convert Datetime into Milliseconds in PHP
How to Convert Datetime into M...

Converting DateTime into milliseconds in PHP can be useful for various applications, such as timestamping events or meas...

Read More

Mar-15-2024

Laravel 8 Form Class Not Found
Laravel 8 Form Class Not Found

In this small post, we will solve the laravel 8 form class not found error, many time we have received errors like the l...

Read More

Mar-12-2021

GoDaddy Alternatives with Superior Customer Support
GoDaddy Alternatives with Supe...

"Hello, GoDaddy! I am encountering a disk space issue with my hosting account!" If this is the phrase you used...

Read More

Feb-21-2025