How To Get And Set Multiple Checkboxes Values Using React.js

Introduction

In this article, we will learn how to get and set multiple checkboxes values using React.js.

Checkboxes are shown as a square box that is ticked (checked) when activated or deactivated (unchecked).

Checkboxes are used to let a user select one or more options of a limited number of choices like hobbies etc.

Let’s Begin

Create component MultipleCheckboxes.js and add the below code in it.

import React, { Component } from 'react'

export default class MultipleCheckboxes extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Hobby: [
                { id: 1, value: "Cricket", },
                { id: 2, value: "Travelling" },
                { id: 3, value: "Playing" },
            ],
            checkedItems: new Map(),
        }
        this.ChangeHobby = this.ChangeHobby.bind(this);
        this.getCheckboxesValue = this.getCheckboxesValue.bind(this);
        this.setCheckboxValueSelected = this.setCheckboxValueSelected.bind(this);
    }
    ChangeHobby(event) {
        this.setState(prevState => ({ checkedItems: prevState.checkedItems.set(event.target.value, event.target.checked) }));
    }
    getCheckboxesValue(event) {
        let value = "";
        this.state.checkedItems.forEach((hobbyinfo, index) => {
            if (hobbyinfo) {
                value = value == "" ? index : value + "," + index;
            }
        })
        alert(value);
    }
    setCheckboxValueSelected(event) {
        this.setState(prevState => ({ checkedItems: prevState.checkedItems.set("Cricket", true) }));
    }
    render() {
        return (
            <section className="content-wrapper">
                <div className="container-fluid ">
                    <div className="row col-md-12 card">

                        <label >Hobby</label>
                        {
                            this.state.Hobby.map(item => (

                                <li>
                                    <label>
                                        <input type="checkbox" value={item.value} onChange={this.ChangeHobby} checked={this.state.checkedItems.get(item.value)} /> {item.value}
                                    </label>
                                </li>
                            ))
                        }

                    </div>
                    <div className="row col-md-12 ml-2">
                        <button type="button" class="btn btn-primary mr-2" onClick={this.setCheckboxValueSelected}>Set Value (Cricket)</button>
                        <button type="button" class="btn btn-primary" onClick={this.getCheckboxesValue}>Get Value</button>
                    </div>
                </div>
            </section>

        )
    }
}

Output :

If you have any questions or face problems about this article, please let me know

You can watch my previous blog here.

Thank You.