React js Get Multiple Checkbox Value On Submit

Get all checked checkbox value on submit in react app example; In this tutorial, i will explain to you in detail how to get multiple checkboxes values in react apps with bootstrap form.

If you are implementing a form in react app and that form has multiple checkbox. And you want that when the form is submitted then you can get the values of multiple checkboxes. Then this tutorial will be helpful for you.

For react js get multiple checkbox value on submit; i will create a simple form with checked boxes in react app. And get multiple checked checkboxes values in react apps.

How to Get All Checked Checkbox Values On Submit in React JS App

  • Step 1 – Create React App
  • Step 2 – Install Bootstrap 4
  • Step 3 – Create Checkbox Component
  • Step 4 – Import Checkbox Component in App.js

Step 1 – Create React App

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 Bootstrap 4

Execute the following command on command prompt to install boostrap 4 library into your react app:

npm install bootstrap --save

Add 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

Create checkbox form component; So visit src directory of your react js app and create a checkbox form component named CheckboxForm.js. And add the following code into it:

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 - LaraTutorials.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;

Note that, CheckboxForm.js component uses a state array to store multiple checkbox values.

Step 4 – Import Checkbox Component in App.js

Import checkbox form component in app.js; So,  visit src/App.js file and import CheckboxForm.js component into it:

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 multiple checked checkbox value on submit. In this tutorial, you have learned how to get multiple checkbox values in react js app with bootstrap form.

Recommended React JS Post

Be First to Comment

Leave a Reply

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