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

03 Aug, 2021
Given a number of checkboxes. The task is to get the value of all selected checkboxes in the array using JQuery. Few of the methods are discussed below:
jQuery on() MethodThis method adds one or more event handlers for the selected elements and child elements.Syntax:$(selector).on(event, childSel, data, fun, map)
Parameters:event: This parameter is required. It specifies one or more than one event(s) or namespaces to add to the selected elements.If there are multiple event values, separate them by space. Event must be a valid.childSel: This parameter is optional. It specifies that the event handler should only be attached to the defined child elements.data: This parameter is optional. It specifies additional data to pass to the function.fun: This parameter is required. It specifies the function to run when the event occurs.map: It specifies an event map ({event:func(), event:func(), ...}) having one or more event to add to the selected elements, and functions to run when the events happens.
$(selector).on(event, childSel, data, fun, map)

Parameters:
event: This parameter is required. It specifies one or more than one event(s) or namespaces to add to the selected elements.If there are multiple event values, separate them by space. Event must be a valid.
childSel: This parameter is optional. It specifies that the event handler should only be attached to the defined child elements.
data: This parameter is optional. It specifies additional data to pass to the function.
fun: This parameter is required. It specifies the function to run when the event occurs.
map: It specifies an event map ({event:func(), event:func(), ...}) having one or more event to add to the selected elements, and functions to run when the events happens.
jQuery text() MethodThis method set/return the text content of the selected elements.If this method is used to return content, it provides the text content of all matched elements (HTML tags will be removed).If this method is used to set content, it replace the content of ALL matched elements.Syntax:Return text content:$(selector).text()
Set text content:$(selector).text(content)
Set text content using a function:$(selector).text(function(index, curContent))
Parameters:content: This parameter is required. It specifies the new text content for the selected elements.function(index, curContent): This parameter is optional. It specifies a function that returns the new text content for the selected elements.index: It returns the index position of the element in the set.curContent: It returns current content of selected elements.
Return text content:$(selector).text()

$(selector).text()

Set text content:$(selector).text(content)

$(selector).text(content)

Set text content using a function:$(selector).text(function(index, curContent))

$(selector).text(function(index, curContent))

Parameters:
content: This parameter is required. It specifies the new text content for the selected elements.
function(index, curContent): This parameter is optional. It specifies a function that returns the new text content for the selected elements.index: It returns the index position of the element in the set.curContent: It returns current content of selected elements.
index: It returns the index position of the element in the set.
curContent: It returns current content of selected elements.
jQuery val() MethodThis method return/set the value attribute of the matched elements.In case of return value, This method returns the value attribute’s value of the FIRST selected element.In case of set value, This method sets the value attribute’s value for ALL selected elements.Syntax:Return the value attribute:$(selector).val()
Set the value attribute:$(selector).val(value)
Set the value attribute using a function:$(selector).val(function(index, cValue))
Parameters:value: This parameter is required. It specifies the value attribute’s value.function(index, cValue): This parameter is optional. It specifies a function that returns the value to set.index: It returns the index of the element in the set.cValue: It returns the current value attribute of selected elements.
Return the value attribute:$(selector).val()

$(selector).val()

Set the value attribute:$(selector).val(value)

$(selector).val(value)

Set the value attribute using a function:$(selector).val(function(index, cValue))

$(selector).val(function(index, cValue))

Parameters:
value: This parameter is required. It specifies the value attribute’s value.
function(index, cValue): This parameter is optional. It specifies a function that returns the value to set.index: It returns the index of the element in the set.cValue: It returns the current value attribute of selected elements.
index: It returns the index of the element in the set.
cValue: It returns the current value attribute of selected elements.
JavaScript Array push() MethodThis method adds new items at the end of array, and returns the new length.Syntax:array.push(item1, item2, ..., itemN)
Parameters:item1, item2, ..., itemN: This parameter is required. It specifies the item(s) to add to the array.Return value:It returns a number, which represents the new length of the array.
array.push(item1, item2, ..., itemN)

Parameters:
item1, item2, ..., itemN: This parameter is required. It specifies the item(s) to add to the array.
Return value:It returns a number, which represents the new length of the array.
Example 1: This example selects the checked checkboxes by a selector and then calls the .each() method to each element and finally push them into the array.
<!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() {            var array = [];            $("input:checkbox[name=type]:checked").each(function() {                array.push($(this).val());            });            $('#GFG_DOWN').text(array);        });    </script></body>  </html>
Output:
Before clicking the button:
After clicking the button:
Example 2: This example also does the same work but with a different approach. This example selects the checked checkboxes by a selector(different from the previous one) and then calls the .each() method to each element and finally push them into the array.
<!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() {            var array = [];            $("input:checked").each(function() {                array.push($(this).val());            });            $('#GFG_DOWN').text(array);        });    </script></body>  </html>
Output:
Before clicking the button:
After clicking the button:
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.
Akanksha_Rai
jQuery-HTML/CSS
jQuery-Misc
JavaScript
JQuery
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to change the background color after clicking the button in JavaScript ?
How to fetch data from JSON file and display in HTML table using jQuery ?