Open In App

How to get all selected checkboxes in an array using jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to discuss various methods to get all the selected checkboxes in an array using jQuery. Several ways of doing this in jQuery are explained in detail with their practical implementation using code examples.

Using the array.push() method with each() method

The array.push() method can be used to get the values of the selected checkboxes and push them into an array to store them in the form of the array. The push() method takes the value of the item that needs to be pushed in the array.

Syntax:

array.push(value);

Example: The below code example explains the use of the push() method to get and store all the checked checkboxes inside an array.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        JQuery | Get all selected checkboxes in an array.
    </title>
    <style>
        #GFG_UP {
            font-size: 17px;
            font-weight: bold;
        }
         
        #GFG_DOWN {
            color: green;
            font-size: 24px;
            font-weight: bold;
        }
         
        button {
            margin-top: 20px;
        }
    </style>
</head>
<script src=
</script>
 
<body style="text-align:center;" id="body">
    <h1 style="color:green;">
            GeeksforGeeks
        </h1>
    <p id="GFG_UP">
    </p>
     
    <input type="checkbox" name="type" value="GFG" /> GFG:
    <input type="checkbox" name="type" value="Geeks" /> Geeks:
    <input type="checkbox" name="type" value="Geek" /> Geek:
    <input type="checkbox" name="type" value="Portal" /> portal:
    <br>
    <button>
        click here
    </button>
    <p id="GFG_DOWN">
    </p>
    <script>
        $('#GFG_UP')
        .text('First check few elements then click on the button.');
        $('button').on('click', function(e) {
            e.preventDefault();
            let array = [];
            $("input:checkbox[name=type]:checked").each(function() {
                array.push($(this).val());
            });           
            if(array.length){
                $('#GFG_DOWN')
                  .text(`Value of selected checkboxes are: ${array}`);
            }
            else{
                $('#GFG_DOWN')
                  .text("Checkbox is not selected, Please select one!");
            }
        });
    </script>
</body>
 
</html>


Output:

checkedBoxesGIF

Using the .toArray() method with the map() method

The .toArray() method can be used with the map() method to iterate through all the checked checkboxes and store them into an array. It does not accept any parameter to convert the entries into an array.

Syntax:

let arr = $('checkbox_selector').map(function(){}).toArray();

Example: The below code example illustrate the use of the toArray() method to get the checked checkboxes inside an array.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        JQuery | Get all selected checkboxes in an array.
    </title>
    <style>
        #GFG_UP {
            font-size: 17px;
            font-weight: bold;
        }
         
        #GFG_DOWN {
            color: green;
            font-size: 24px;
            font-weight: bold;
        }
         
        button {
            margin-top: 20px;
        }
    </style>
</head>
<script src=
</script>
 
<body style="text-align:center;" id="body">
    <h1 style="color:green;">
            GeeksforGeeks
        </h1>
    <p id="GFG_UP">
    </p>
     
    <input type="checkbox" name="type" value="GFG" /> GFG:
    <input type="checkbox" name="type" value="Geeks" /> Geeks:
    <input type="checkbox" name="type" value="Geek" /> Geek:
    <input type="checkbox" name="type" value="Portal" /> portal:
    <br>
    <button>
        click here
    </button>
    <p id="GFG_DOWN">
    </p>
    <script>
        $('#GFG_UP')
        .text('First check few elements then click on the button.');
        $('button').on('click', function(e) {
            e.preventDefault();
            let array = $("input:checkbox[name=type]:checked")
                .map(function (){
                return $(this).val();
            }).toArray();           
            if(array.length){
                $('#GFG_DOWN')
                  .text(`Value of selected checkboxes are: ${array}`);
            }
            else{
                $('#GFG_DOWN')
                  .text("Checkbox is not selected, Please select one!");
            }
        });
    </script>
</body>
 
</html>


Output:

checkedBoxesGIF

Using the .get() method with map() method

In this approach, the .get() method will be used with the map() method. This method is almost similar to the previous method, you just need to replace the .toArray() method with the .get() method to get it done.

Syntax:

let arr = $('checkbox_selector').map(function(){}).toArray();

Example: The below example shows that how you can use the .get() method with the map() method to get the checked checkboxes into an array.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        JQuery | Get all selected checkboxes in an array.
    </title>
    <style>
        #GFG_UP {
            font-size: 17px;
            font-weight: bold;
        }
         
        #GFG_DOWN {
            color: green;
            font-size: 24px;
            font-weight: bold;
        }
         
        button {
            margin-top: 20px;
        }
    </style>
</head>
<script src=
</script>
 
<body style="text-align:center;" id="body">
    <h1 style="color:green;">
            GeeksforGeeks
        </h1>
    <p id="GFG_UP">
    </p>
     
    <input type="checkbox" name="type" value="GFG" /> GFG:
    <input type="checkbox" name="type" value="Geeks" /> Geeks:
    <input type="checkbox" name="type" value="Geek" /> Geek:
    <input type="checkbox" name="type" value="Portal" /> portal:
    <br>
    <button>
        click here
    </button>
    <p id="GFG_DOWN">
    </p>
    <script>
        $('#GFG_UP')
        .text('First check few elements then click on the button.');
        $('button').on('click', function(e) {
            e.preventDefault();
            let array =
                $("input:checkbox[name=type]:checked").map(function (){
                return $(this).val();
            }).get();
             
            if(array.length){
                $('#GFG_DOWN')
                  .text(`Value of selected checkboxes are: ${array}`);
            }
            else{
                $('#GFG_DOWN')
                  .text("Checkbox is not selected, Please select one!");
            }
        });
    </script>
</body>
 
</html>


Output:

checkedBoxesGIF

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.



Last Updated : 14 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads