Get checkbox value in jQuery
With jQuery, you can use the .val() method to get the value of the Value attribute of the desired input checkbox.
$("input[type='checkbox']").val();
Or if you have set a class , you can:
$('.chk').val()
Or ID , you can:
$('#chk').val();
Browser View
<!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
If you have more than one checkboxes then you can use the jQuery :checked selector in combination with the jQuery each() method to retrieve the values of all checkboxes selected in a group.
var days = [];
$.each($("input[name='directions']:checked"), function(){
days.push($(this).val());
});
alert("Selected say(s) are: " + days.join(", "));
Browser ViewSelect Day(s)
<!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
<!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
}
Related Topics
- How to get input textbox value using jQuery
- Get Selected Dropdown Value on Change Event | jQuery
- How to submit a form using ajax in jQuery
- How can I get the ID of an element using jQuery
- Open Bootstrap modal window on Button Click Using jQuery
- How to select an element with its name attribute | jQuery
- How to get the data-id attribute using jQuery
- How to disable/enable submit button after clicked | jQuery
- How to replace innerHTML of a div using jQuery
- Change the selected value of a drop-down list using jQuery
- How to wait 'X' seconds with jQuery?
- How to detect enter key press on keyboard | jQuery
- How to allow numbers only in a Text Box using jQuery.
- How to dynamically create a div in jQuery?