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.
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:
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:
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:
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.
Similar Reads
How to check an array is empty or not using jQuery ?
In this article, we will check if an array is empty or not using jQuery. In JavaScript, arrays are a special type of object. If we use the typeof operator for arrays, it returns "object". We can use jQuery's isEmptyObject() method to check whether the array is empty or contains elements. The isEmpty
2 min read
How to Convert List of Elements in an Array using jQuery?
Given an HTML document containing a list of elements, the task is to get the values of the HTML list and convert it into an array using JavaScript. ApproachMake a list(Ordered/ Unordered).Select the parent of <li> element and call an anonymous function for every child of parent( .each() or .ma
2 min read
How to find all checkbox inputs using jQuery ?
The task is to find all the checkbox input using jQuery. Checkboxes are the square boxes that are ticked when activated, and it is used to select one or more number of choices. Method and Selectors used: :checkbox: This selector is used to select the input element with type = checkbox. .wrap(): This
2 min read
How to uncheck all other checkboxes apart from one using jQuery ?
In this article, we will see how to uncheck all checkboxes except first using jQuery. Approach: First, we need to get all check box elements in a page. We can get all the check-boxes using the following jQuery call: $('input[type=checkbox]') Next we can use jQuery each function to iterate over each
2 min read
How to Select all Checkboxes in all Pages in jQuery DataTable ?
Selecting all the table entries together at the same time in the jQuery data table can be achieved using the below methods. Before directly going to the implementation, first include the below CDN Links to your HTML document to implement the data table.Using the fnGetNodes() method of dataTableIn th
5 min read
How to iterate through all selected elements into an array ?
The task is to add all the selected HTML elements into an array and iterate through the array. To achieve this, the first step is to select all the desired elements. There are several ways to do this. Finding HTML elements by id:var myElement = document.getElementById("element-id");Finding HTML elem
3 min read
How to make a Themed Checkbox using jQuery Mobile ?
jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Themed Checkbox using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheet†hr
1 min read
How to get selected text from a drop-down list using jQuery?
In this article, we will learn how we can get the text of the selected option in a select tag using jQuery. There are two ways in jQuery that we can use to accomplish this task. Table of Content Using the val() method By using option:selected selector and text() method togehterUsing the val() method
2 min read
How to select all on focus in input using JQuery?
The select() event is applied to an element using jQuery when the user makes a text selection inside an element or on focus the element. This event is limited to some fields. Syntax: $("selected element").select(); //Select all Input field on focus $("input").select(); //Select Input field on focus
1 min read
How to make a Icon position Checkbox using jQuery Mobile ?
jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating an Icon position Checkbox using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€styles
1 min read