Get checkbox value in jQuery

By: Rajesh P.S.

In jQuery, the .val() method proves valuable for retrieving the value attribute of a selected input checkbox. This technique allows you to effortlessly access the specified checkbox's value attribute and utilize it in your scripting endeavors.

$("input[type='checkbox']").val();

Or if you have set a class , you can:

$('.chk').val()

Or ID , you can:

$('#chk').val();

Browser View

Select This

Continue Reading...

Full Source | jQuery

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function() { $("button").click(function(){ if ($('.chk').is(":checked")) { alert($("input[type='checkbox']").val()); } }); }); </script> </head> <body> <label><input type="checkbox" value="myChk" class="chk"> Select This</label> <br> <button type="button">Get CheckBox Value</button> </body> </html>

Get the values of selected checkboxes in a group | jQuery

use jQuery to get values of selected checkboxes

When dealing with multiple checkboxes, employing the jQuery :checked selector in conjunction with the .each() method offers an effective strategy to gather the values of selected checkboxes within a group. This approach enables seamless iteration through the selected checkboxes, allowing you to collect and work with their respective values systematically and efficiently.

var days = []; $.each($("input[name='directions']:checked"), function(){ days.push($(this).val()); }); alert("Selected say(s) are: " + days.join(", "));

Browser View

Select Day(s)

Monday Tuesday Wednesday Thursday Friday

Full Source | jQuery

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function() { $("button").click(function(){ var days = []; $.each($("input[name='directions']:checked"), function(){ days.push($(this).val()); }); alert("Selected say(s) are: " + days.join(", ")); }); }); </script> </head> <body> <h3>Select Day(s)</h3> <label><input type="checkbox" value="mon" name="directions"> Monday</label> <label><input type="checkbox" value="tue" name="directions"> Tuesday</label> <label><input type="checkbox" value="wed" name="directions"> Wednesday</label> <label><input type="checkbox" value="thu" name="directions"> Thursday</label> <label><input type="checkbox" value="fri" name="directions"> Friday</label> <br> <br><button type="button">Get selected day(s)</button> </body> </html>

How to check whether a checkbox is checked in jQuery?

In order to check whether it is checked or not, you can use is():

if ($('#chk').is(":checked")) { //it is checked }

Or you can use prop()

if ($('#chk').prop('checked')) { //it is checked }

Or any version of jQuery

// Assuming an event handler on a checkbox if (this.checked)

Browser View

Select This

Full Source | jQuery

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function() { $("button").click(function(){ if ($('.chk').prop("checked")) { alert("Checked !!"); } }); }); </script> </head> <body> <label><input type="checkbox" value="myChk" class="chk"> Select This</label> <br> <button type="button">Get CheckBox Value</button> </body> </html>

How to check if a checkbox is checked using JavaScript

The checked property of a checkbox DOM element will give you the checked state of the element.

if(document.getElementById('chk').checked) { //it is checked } else { //it is not checked }

Conclusion

To obtain checkbox values in jQuery, you can employ the .val() method for a single checkbox's value or utilize the :checked selector with the .each() method for multiple checkboxes. This combination enables the extraction of selected checkbox values and facilitates processing within checkbox groups.

Next > How to wait 'X' seconds with jQuery?

Related Topics

More Related Topics.....