Get All Checked Checkboxes jQuery
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Dikshita
In this article we will show you the solution of get all checked checkboxes jQuery, using JQuery, the job is to retrieve the values of all checked checkboxes in the array.
Below are a few of the techniques discussed
Step By Step Guide On Get All Checked Checkboxes jQuery :-
The jQuery on() method
The specified items and their descendant elements have one or more event handlers added by this method.
Syntax:
$(selector).on(event, childSel, data, fun, map)
Parameters :-
- event: This input is necessary. The number of events or namespaces to add to the chosen elements is specified. Put a space between each event value if there are several. Event must be legitimate.
- childSel: This optional parameter. It specifies that an event handler shall only be attached to the provided child components..
- data: You can omit this parameter. It indicates what extra information should be passed to the function.
- fun: You must include this parameter. It details the action to be taken when the event takes place.
- map: It outlines an event map with one or more events to add to the chosen elements and functions to execute when the events occur (event:func(), event:func(),...).
jQuery text() Method
This function changes and retrieves the text content of the chosen components.
This method returns content and provides the text content from all matching objects (HTML tags will be removed).
When such method is utilized to alter content, the data of EVERY element that meets is changed.
Syntax:
- Return text content: $(selector).text()
- Set text content: $(selector).text(content)
- Use a function to specify text content: $(selector).text(function(index, curContent))
Parameters:
- content: This field must be filled up. For the components you've chosen, it specifies the new text content.
- function(index, curContent): The additional curContent argument. The method that gets the updated text for the chosen components is specified.
- index: The element's position within the set's index is returned.
- curContent: It provides the selected items' most recent content.
jQuery val() Method
This method returns or changes the value property for the elements that were matched.
If there is a return value, this function returns the FIRST element that was chosen's value attribute value.
In the event of a set value, this method sets the value attribute's value for EVERY element that has been chosen.
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 must have a value. It details the value of the value attribute.
- function(index, cValue): The optional third argument. It designates a function that yields the desired value.
- index: It gives back the element's position within the set.
- cValue: It returns the selected elements' most recent value attribute.
<html>
<head>
<title>Get all checked checkboxes jquery</title>
</head>
<body>
<h2> Get all checked checkboxes jquery </h2>
Read: <input type="checkbox" id="read" checked="checked" />
Write: <input type="checkbox" id="write" checked="checked" />
Speak: <input type="checkbox" id="speak" />
<div id="output"></div>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function () {
$('input[type=checkbox]:checked').each(function () {
var status = (this.checked ? $(this).val() : "");
var id = $(this).attr("id");
$('#output').append("<h3>" + id + " : " + status + "</h3>");
});
});
</script>
</body>
</html>
- Our code begins with HTML and HEAD tags.
- Next, we give the page's title.
- Following that, we launch our main programme.
- The heading is written in our body.
- Next, we employ three checkboxes, with two of them being checked.
- Following that, we launch our script and load a hosted library to load jQuery.
- Next, we use $ (document).ready()function, which is used for pages, cannot be securely modified. This level of readiness is recognised by jQuery for you.
- Using the each() function, we define the checkbox and determine whether it is checked or not.
- Next, we determine whether it has been checked or not.
- We then print the output of the checked checkboxes.
- We then end our script.
- Finally, we use BODY and HTML elements to wrap up our programme.
Conclusion :-
As a result, we have successfully learned how to use jQuery to get all checkboxes that are checked.
Its motto of "Write less, accomplish more" has made jQuery a well-known open source JavaScript library that facilitates interactions between HTML/CSS documents.
I hope this article on get all checked checkboxes jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
