In this article, you will learn how to check if the checkbox is checked or not using Jquery or javascript. There are various ways to check if the checkbox is checked or not. In this article, we used the prop() and is() function along with the :checked selector to check if the checkbox is checked or not using jquery or Javascript.
The prop() function sets or returns the properties and values of the selected elements. This function gets the value of a property for the first element in the set of matched elements or sets one or more properties for every matched element. In the case of a checkbox, this function works well in every condition because every checkbox has checked property which specifies the checkbox status whether it is Checked or Unchecked.
Here is the source code of the program to check if the checkbox is checked or not by using the prop() function in Jquery.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>How To Check if Checkbox is Checked or Not using Jquery</title>
<!-- Include Jquery Library -->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<input type="checkbox" name="checkbox" value="checkbox" />CheckBox
<br />
<button type="button" id="btn_submit">Click Here</button>
<script>
// Script to Check if Checkbox is Checked or Not
// On Button Clicked
$("#btn_submit").on('click',function(e) {
if($('input[type="checkbox"]').prop('checked')) {
alert('Checkbox is Checked');
} else {
alert('Checkbox is Unchecked');
}
});
</script>
</body>
</html>
The is() function checks if one of the selected elements matches the selectorElement. This function checks the currently matched set of elements against a selector, element, or jQuery object and returns true if at least one of these elements matches the given arguments.
Here is the source code of the program to check if the checkbox is checked or not by using the is() function in Jquery.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>How To Check if Checkbox is Checked or Not using Jquery</title>
<!-- Include Jquery Library -->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<input type="checkbox" name="checkbox" value="checkbox" />CheckBox
<br />
<button type="button" id="btn_submit">Click Here</button>
<script>
// Script to Check if Checkbox is Checked or Not
// On Button Clicked
$("#btn_submit").on('click',function(e) {
if($('input[type="checkbox"]').is(':checked')) {
alert('Checkbox is Checked');
} else {
alert('Checkbox is Unchecked');
}
});
</script>
</body>
</html>In this example, we used the :checked selector and length, if the length is greater than zero if the checkbox is checked.
Here is the source code of the program to check if the checkbox is checked or not by using the :checked and length in Jquery.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>How To Check if Checkbox is Checked or Not using Jquery</title>
<!-- Include Jquery Library -->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<input type="checkbox" name="checkbox" value="checkbox" />CheckBox
<br />
<button type="button" id="btn_submit">Click Here</button>
<script>
// Script to Check if Checkbox is Checked or Not
// On Button Clicked
$("#btn_submit").on('click', function(e) {
if ($('input[type=checkbox]:checked').length > 0) {
alert('Checkbox is Checked');
} else {
alert('Checkbox is Unchecked');
}
});
</script>
</body>
</html>In this example, we used the document.getElementsById() function to check if the checkbox is checked or not using javascript.
Here is the source code of the program to check if the checkbox is checked or not by using the document.getElementsById() function in Javascript.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>How To Check if Checkbox is Checked or Not using Jquery</title>
<!-- Include Jquery Library -->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<input type="checkbox" name="checkbox" id="checkbox" value="checkbox" />CheckBox
<br />
<button type="button" id="btn_submit">Click Here</button>
<script>
// Script to Check if Checkbox is Checked or Not
// On Button Clicked
$("#btn_submit").click(function() {
if (document.getElementById('checkbox').checked) {
alert("CheckBox is Checked");
} else {
alert("CheckBox is Unchecked");
}
});
</script>
</body>
</html>I hope this article will help you to understand how to check if the checkbox is checked or not using Jquery or javascript.
Share your valuable feedback, please post your comment at the bottom of this article. Thank you!
Comments