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





Follow us
facebooklogo github instagram twitter