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

Last Updated : 14 Dec, 2023

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.

Table of Content

Using the array.push() method with each() method
Using the .toArray() method with the map() method
Using the .get() method with map() method

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= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> 
</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= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> 
</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= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> 
</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.