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 Disable Past Date In jQuery Datepicker
How To Disable Past Date In jQ...

In this tutorial, we will see how to disable past dates in jquery datepicker. In the date picker, today's date...

Read More

Jun-18-2022

How To Send Email Using SendGrid In Laravel 9
How To Send Email Using SendGr...

In this article, we will see how to send email using SendGrid in laravel 9. Laravel provides a clean API over...

Read More

Jul-25-2022

Carbon Add Minutes To Date In Laravel 9
Carbon Add Minutes To Date In...

In this article, we'll explore how to add minutes to a date in Laravel 8, Laravel 9 and Laravel 10 using Carbon...

Read More

Nov-23-2022

Laravel 10 AJAX Form Validation Example
Laravel 10 AJAX Form Validatio...

In this article, we will see how to validate the ajax form in laravel 10. Here we will learn about the laravel 10 a...

Read More

Mar-24-2023