How to get multiple checkbox value in javascript

How to get multiple checkbox value in javascript

JavaScript 30-07-2021 Saheb Sutradhar

In this post you will learn how to get multiple checkbox value in javascript . In many application you will find this kind of feature where we allow user to select multiple options by using checkbox.

checked  is the property of checkbox element , if the checkbox is checked the the value of the checked property will be true or else the value will be false.

Radio button and checkbox both are different . To create checkbox we use input element with type='checkbox'  .

Syntax : 

<input type="checkbox" value="value">

 

Below three examples will help you to understand how we use checkbox in our application.

Example : 1

Below example we are allowing user to select multiple colors using checkbox.

 

how to get multiple checkbox value in javascript with getelementbyid

index.html

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple checkbox value in javascript </title>
    <style>
        .header {
            text-align: center;
            background-color: rgb(68, 25, 211);
            color: white;
            padding: 10px;
        }

        .wrapper {
            width: 20%;
            margin: auto;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgb(54, 54, 54);
            overflow: hidden;
        }

        .item {
            padding: 10px;
            margin-left: 40px;
        }

        button {
            display: block;
            margin: 10px auto;
            outline: none;
            padding: 12px;
            border: none;
            background-color: rgb(68, 25, 211);
            border-radius: 8px;
            color: white;
            cursor: pointer;
            width: 150px;
        }

        .result {
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="header">
            <h3>Items</h3>
        </div>
        <div id="itemForm">
            <div class="item">
                <label for="green">Green</label>
                <input id="green" type="checkbox" value="Green">
            </div>
            <div class="item">
                <label for="pink">Pink</label>
                <input id="pink" type="checkbox" value="Pink">
            </div>
            <div class="item">
                <label for="yellow">Yellow</label>
                <input id="yellow" type="checkbox" value="Yellow">
            </div>
            <div class="item">
                <label for="black">Black</label>
                <input id="black" type="checkbox" value="Black">
            </div>

            <button id="submit">Save</button>

        </div>
    </div>
    <p class="result"></p>

    <script>
        var itemForm = document.getElementById('itemForm'); // getting the parent container of all the checkbox inputs
        var checkBoxes = itemForm.querySelectorAll('input[type="checkbox"]'); // get all the check box
        document.getElementById('submit').addEventListener('click', getData); //add a click event to the save button

        let result = [];

        function getData() { // this function will get called when the save button is clicked
            result = [];
            checkBoxes.forEach(item => { // loop all the checkbox item
                if (item.checked) {  //if the check box is checked
                    let data = {    // create an object
                        item: item.value,
                        selected: item.checked
                    }
                    result.push(data); //stored the objects to result array
                }
            })
            document.querySelector('.result').textContent = JSON.stringify(result); // display result
        }
    </script>
</body>

</html>

 

Example : 2

In below example user can select all or user can select any of the option

In below example we are using few check box where user can choose any of the color or if user want to select all then user can click select all button to select all the colors.

how to get multiple checkbox value in javascript with getelementbyid

 

Index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple checkbox value in javascript </title>
    <style>
        .header {
            text-align: center;
            background-color: rgb(72, 179, 10);
            color: white;
            padding: 10px;
        }

        .wrapper {
            width: 20%;
            margin: auto;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgb(54, 54, 54);
            overflow: hidden;
        }

        .item {
            padding: 10px;
            margin-left: 40px;
        }

        button {
            display: block;
            margin: 10px auto;
            outline: none;
            padding: 12px;
            border: none;
            background-color: rgb(72, 179, 10);
            border-radius: 8px;
            color: white;
            cursor: pointer;
            width: 150px;
        }

        .result {
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="header">
            <h3>Items</h3>
        </div>
        <div id="itemForm">
            <div class="item">
                <label for="green">Green</label>
                <input id="green" type="checkbox" value="Green">
            </div>
            <div class="item">
                <label for="pink">Pink</label>
                <input id="pink" type="checkbox" value="Pink">
            </div>
            <div class="item">
                <label for="yellow">Yellow</label>
                <input id="yellow" type="checkbox" value="Yellow">
            </div>
            <div class="item">
                <label for="black">Black</label>
                <input id="black" type="checkbox" value="Black">
            </div>
            <button id="selectAll">Select All</button>
            <button id="submit">Save</button>

        </div>
    </div>
    <p class="result"></p>

    <script>
        var itemForm = document.getElementById('itemForm'); // getting the parent container of all the checkbox inputs
        var checkBoxes = itemForm.querySelectorAll('input[type="checkbox"]'); // get all the check box
        document.getElementById('submit').addEventListener('click', getData); //add a click event to the save button

        let result = [];

        function getData() { // this function will get called when the save button is clicked
            result = [];
            checkBoxes.forEach(item => { // loop all the checkbox item
                if (item.checked) {  //if the check box is checked
                    let data = {    // create an object
                        item: item.value,
                        selected: item.checked
                    }
                    result.push(data); //stored the objects to result array
                }
            })
            document.querySelector('.result').textContent = JSON.stringify(result); // display result
        }


        document.getElementById('selectAll').addEventListener('click', selectAll); //add a click event to the selectAll button

        function selectAll() {
            checkBoxes.forEach(item => {
                item.checked = true;
            })
    }

    </script>
</body>

</html>

 

Example : 3

In below example user can select all or user can select any of the option and user has the option to deselect all the selected colors

In below example we are using few check box where user can choose any of the color or if user want to select all then user can click select all button to select all the colors and user has the option to deselect all the selected colors.

 

how to get multiple checkbox value in javascript with getelementbyid

 

Index.html

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple checkbox value in javascript </title>
    <style>
        .header {
            text-align: center;
            background-color: rgb(72, 179, 10);
            color: white;
            padding: 10px;
        }

        .wrapper {
            width: 20%;
            margin: auto;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgb(54, 54, 54);
            overflow: hidden;
        }

        .item {
            padding: 10px;
            margin-left: 40px;
        }

        button {
            display: block;
            margin: 10px auto;
            outline: none;
            padding: 12px;
            border: none;
            background-color: rgb(72, 179, 10);
            border-radius: 8px;
            color: white;
            cursor: pointer;
            width: 150px;
        }

        .result {
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="header">
            <h3>Items</h3>
        </div>
        <div id="itemForm">
            <div class="item">
                <label for="green">Green</label>
                <input id="green" type="checkbox" value="Green">
            </div>
            <div class="item">
                <label for="pink">Pink</label>
                <input id="pink" type="checkbox" value="Pink">
            </div>
            <div class="item">
                <label for="yellow">Yellow</label>
                <input id="yellow" type="checkbox" value="Yellow">
            </div>
            <div class="item">
                <label for="black">Black</label>
                <input id="black" type="checkbox" value="Black">
            </div>
            <button id="selectAll">Select All</button>
            <button id="deSelectAll">Deselect All</button>
            <button id="submit">Save</button>

        </div>
    </div>
    <p class="result"></p>

    <script>
        var itemForm = document.getElementById('itemForm'); // getting the parent container of all the checkbox inputs
        var checkBoxes = itemForm.querySelectorAll('input[type="checkbox"]'); // get all the check box
        document.getElementById('submit').addEventListener('click', getData); //add a click event to the save button

        let result = [];

        function getData() { // this function will get called when the save button is clicked
            result = [];
            checkBoxes.forEach(item => { // loop all the checkbox item
                if (item.checked) {  //if the check box is checked
                    let data = {    // create an object
                        item: item.value,
                        selected: item.checked
                    }
                    result.push(data); //stored the objects to result array
                }
            })
            document.querySelector('.result').textContent = JSON.stringify(result); // display result
        }


        document.getElementById('selectAll').addEventListener('click', selectAll); //add a click event to the selectAll button
        document.getElementById('deSelectAll').addEventListener('click', deSelectAll); //add a click event to the deSelectAll button


        function selectAll() {
            checkBoxes.forEach(item => {
                item.checked = true;
            })
    }
    function deSelectAll() {
            checkBoxes.forEach(item => {
                item.checked = false;
            })
    }

    </script>
</body>

</html>

 

 

I hope this article is helpful for you , i am very glad to help you thanks for reading

 

 

Related Posts

Card image cap

Math Floor Javascript Method

JavaScript 16-07-2021 Saheb Sutradhar

math.floor javascript method takes a number type value as parameter and returns the round off of that value. The return value will be the nearest downward integ ...

Card image cap

Spread Operator in JavaScript

JavaScript 20-07-2021 Saheb Sutradhar

In this post we will learn what is spread operator in Javascript? How we can use it ? and Where we should use? Spread Operator allows you to spread out the ele ...

Card image cap

Remove duplicates from array in javascript

JavaScript 24-07-2021 Saheb Sutradhar

In this post i will show you how to remove duplicates from array in javascript.We can use filter() method to remove duplicates from array , if the index of the ...

Card image cap

Next and Previous Buttons in Javascript with Demo

JavaScript 27-07-2021 Saheb Sutradhar

In this post we will learn how to use next and previous buttons in javascript with demo application , the below example there is  image container and next, pre ...

Card image cap

Image size validation in javascript example

JavaScript 28-07-2021 Saheb Sutradhar

In this article you will learn Image size validation in javascript with example , along with the size validation you will learn how to validate image mime type. ...

Card image cap

Multiple checkbox validation in javascript

JavaScript 02-08-2021 Saheb Sutradhar

In your application you can use single check box or you can use multiple checkbox . Below examples will help you to understand multiple checkbox validation in j ...