How To Get Multiple Checkbox Values In ReactJS?
Last Updated :
09 Jan, 2025
Improve
Handling checkboxes in ReactJS becomes important when creating forms or managing user input. If you need to select multiple options, we can do it by implementing multiple checkboxes. In this article, we’ll explore how to get the values of multiple checkboxes in ReactJS, manage the state, and display the selected values.
Prerequisites
Approach
To Get Multiple Checkbox Values In ReactJS we will create a simple form that asks the user to select the programming languages they are familiar with. To get multiple checkbox values in ReactJS we will use the HTML DOM checkbox input and store the data accordingly. Handling multiple checkbox values is a common requirement in forms.
Steps To Create React Application
Step 1: Initialize the React project using this command.
npx create-react-app form-check
cd form-check
Step 2: Use this command to install bootstrap
npm i bootstrapProject Structure
The default project structure
Dependencies
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.3.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example: This example uses HTML checkbox for multiple checkbox input and bootstrap for styling the form and displaing user choices..
/* Filename - App.css */
.text {
width: 50%;
margin: auto;
}
.top {
/* margin: auto; */
margin-top: 4%;
width: 50%;
border: 2px ridge black;
background-color: #f1f1f1;
}
h3 {
text-align: center;
}
.row {
padding-left: 20%;
}
// Filename - App.js
import React, { useState } from "react";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
function App() {
const [userinfo, setUserInfo] = useState({
languages: [],
response: [],
});
const handleChange = (e) => {
// Destructuring
const { value, checked } = e.target;
const { languages } = userinfo;
console.log(`${value} is ${checked}`);
// Case 1 : The user checks the box
if (checked) {
setUserInfo({
languages: [...languages, value],
response: [...languages, value],
});
}
// Case 2 : The user unchecks the box
else {
setUserInfo({
languages: languages.filter(
(e) => e !== value
),
response: languages.filter(
(e) => e !== value
),
});
}
};
return (
<>
<div className="container-fluid top ">
<h1 className="text-success">
GeeksforGeeks
</h1>
<h3>
React Example for multiple checkbox
input
</h3>
<div className="container mt-5 pb-5 pt-5">
<h3 className="form-head-contact-h3 ">
Your programming expertise lies in
what languages?{" "}
</h3>
<form>
<div className="row">
<div className="col-md-6">
<div className="form-check m-3">
<input
className="form-check-input"
type="checkbox"
name="languages"
value="Javascript"
id="flexCheckDefault"
onChange={
handleChange
}
/>
<label
className="form-check-label"
htmlFor="flexCheckDefault"
>
Javascript
</label>
</div>
<div className="form-check m-3">
<input
className="form-check-input"
type="checkbox"
name="languages"
value="Python"
id="flexCheckDefault"
onChange={
handleChange
}
/>
<label
className="form-check-label"
htmlFor="flexCheckDefault"
>
Python
</label>
</div>
<div className="form-check m-3">
<input
className="form-check-input"
type="checkbox"
name="languages"
value="Java"
id="flexCheckDefault"
onChange={
handleChange
}
/>
<label
className="form-check-label"
htmlFor="flexCheckDefault"
>
Java
</label>
</div>
<div className="form-check m-3">
<input
className="form-check-input"
type="checkbox"
name="languages"
value="PHP"
id="flexCheckDefault"
onChange={
handleChange
}
/>
<label
className="form-check-label"
htmlFor="flexCheckDefault"
>
PHP
</label>
</div>
</div>
<div className="col-md-6">
<div className="form-check m-3">
<input
className="form-check-input"
type="checkbox"
name="languages"
value="C#"
id="flexCheckDefault"
onChange={
handleChange
}
/>
<label
className="form-check-label"
htmlFor="flexCheckDefault"
>
C#
</label>
</div>
<div className="form-check m-3">
<input
className="form-check-input"
type="checkbox"
name="languages"
value="C++"
id="flexCheckDefault"
onChange={
handleChange
}
/>
<label
className="form-check-label"
htmlFor="flexCheckDefault"
>
C++
</label>
</div>
<div className="form-check m-3">
<input
className="form-check-input"
type="checkbox"
name="languages"
value="C"
id="flexCheckDefault"
onChange={
handleChange
}
/>
<label
className="form-check-label"
htmlFor="flexCheckDefault"
>
C
</label>
</div>
<div className="form-check m-3">
<input
className="form-check-input"
type="checkbox"
name="languages"
value="Typescript"
id="flexCheckDefault"
onChange={
handleChange
}
/>
<label
className="form-check-label"
htmlFor="flexCheckDefault"
>
Typescript
</label>
</div>
</div>
</div>
<div className="form-control mt-3 mb-3 text-center">
<label htmlFor="exampleFormControlTextarea1">
You're proficient in the
following languages :{" "}
</label>
<textarea
className="form-control text"
name="response"
value={userinfo.response}
placeholder="The checkbox values will be displayed here "
id="floatingTextarea2"
style={{ height: "150px" }}
onChange={handleChange}
></textarea>
</div>
</form>
</div>
</div>
</>
);
}
export default App;
Step to run the application: Run our application by using the following command:
npm start Output: By default, the React project will run on port 3000. You can access it at localhost:3000 on your browser.
Get Multiple Checkbox Values In ReactJS
