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
Laravel 8 Has Many Through Relationship Example
Laravel 8 Has Many Through Rel...

In this example we will see laravel 8 has many through relationship example. hasManyThrough relationship difficult to un...

Read More

Nov-17-2021

How To Disable Weekends In jQuery Datepicker
How To Disable Weekends In jQu...

In this tutorial, we will see how to disable weekend dates in jquery datepicker. In the date picker, the weeke...

Read More

Jun-27-2022

Google Line Chart Example in Laravel 8
Google Line Chart Example in L...

In this article, we will see the google line chart example in laravel 8. Google charts use to visualize d...

Read More

Feb-24-2021

Laravel 8 CRUD Operation Example
Laravel 8 CRUD Operation Examp...

In this article, we will see the laravel 8 crud operation. As you know Laravel 8 has already been officially released an...

Read More

Sep-16-2020