How To Get Multiple Checkbox Values In ReactJS?
Last Updated :
09 Jan, 2025
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 bootstrap
Project 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..
CSS
/* 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
Similar Reads
How to get multiple cache data in ReactJS ?
We can use the following approach in ReactJS to get multiple cache data. We can get multiple cache data from the browser and use them in our application whenever needed. Caching is a technique that helps us to store a copy of a given resource in our browser and serve it back when requested.Prerequis
2 min read
How To Use Checkboxes in ReactJS?
Checkboxes are essential UI components used in web applications that allow users to select one or more options from a list. React makes it simple to work with checkboxes, whether you're dealing with a single checkbox or a list of checkboxes. In this article, we will see how to use Checkboxes in Reac
2 min read
How to delete multiple cache data in ReactJS ?
In React, we can access all cache data from the browser and modify it as required whenever needed using the Cache Storage of the browser. Caching is a technique that helps us to store a copy of a given resource in our browser and serve it back when requested. Prerequisites:NPM & Node.jsReact JSC
2 min read
How to get cell value on React-Table ?
React-Table is a powerful library that allows you to create flexible and feature-rich tables in your React applications. It provides various functionalities to manipulate and interact with table data. One common requirement is to retrieve the value of a specific cell in React-Table. In this article,
3 min read
How To Use ComboBox in ReactJS?
When developing React applications, creating user-friendly forms with dropdowns or select inputs is common. However, sometimes you need more than just a static dropdown list—you need a ComboBox. A ComboBox combines the functionality of a dropdown and an input field, allowing users to either select f
2 min read
How to get all checked values of checkbox in JavaScript ?
A checkbox is a selection box that enables users to pick true or false in a binary manner by checking or unchecking it. When a checkbox is checked, it shows that the value has been chosen by the user, and when a checkbox is not checked indicates false which denotes that the user has not chosen the v
2 min read
How to Get Parameter Value from Query String in ReactJS?
In React query parameter are a way to pass the data as props from the url to react components. Getting parameter value from query string helps to render the dynamic data depending on the query.ApproachTo get the parameter value from query string in React we will be using the query-string packge. We
2 min read
How to use map() to Create Lists in ReactJS ?
The map function is generally used to render the list items dynamically in react. This function iterates over the array and each iteration returns the JSX for respective item. It helps to render and display the list efficiently. Prerequisites:React JSJavaScript Array.mapApproachTo create and render
2 min read
How to Pass JSON Values into React Components ?
In React, you can pass JSON values into components using props. Props allow us to send data from a parent component to its child components. When rendering a component, you can pass the JSON values as props. These props can then be accessed within the component’s function or class, allowing you to d
3 min read
How to create Password Checklist in ReactJS ?
The password checklist in the React JS app is a list of password validation steps or conditions that should be fulfilled. These conditions are automatically checked when the password is input in the input field. Prerequisites:NPM & Node.jsReact JSApproach too create Password Checklist: To add ou
2 min read