How To Get Multiple Checkbox Value In React JS

How To Get Multiple Checkbox Value In React JS

In this tutorial guide, you will learn how to get multiple checkboxes values in react js application using HTML input checkboxes and states.

How to Get Multiple Checked Checkbox Values On Submit in React JS

Steps to get multiple checkbox values using states and HTML checkbox:

Step 1 – Create React App

In this step, open your terminal and execute the following command on your terminal to 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

Check out your React app on this URL: localhost:3000

Step 2 – Install and Set up Bootstrap

In this step, execute the following command to install bootstrap library into your react app:

npm install bootstrap --save

Set up bootstrap.min.css file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
  return (
    <div>
      <!-- something here -->
    </div>
  );
}
export default App;

Step 3 – Create Checkbox Form Component

Goto src directory of your react js app, create a checkbox form component named CheckboxForm.js, and then Create HTML checkbox input and store the corresponding value in states:

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>To Get Multiple Checked Checkbox Values On Submit in React JS - Tutsmake.com</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">Reading</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">Developing</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">Desiging</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, you need to add 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;

Conclusion

React JS get all checked checkbox value on submit. In this tutorial, you have learned in detail how to get multiple checkbox values in react js app with bootstrap form.

Recommended React JS Post

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *