Here I will explained with an example and live demo, How to check whether a CheckBox is checked (selected) or unchecked (not selected) using JavaScript or jQuery.
Description:
The checked property indicates whether a checkbox is checked or not. If a checkbox is selected, the value of checked property is true otherwise it is false.
----: Using JavaScript :-----
Example-
<html>
<head>
<script type="text/javascript">
function Check() {
var chkGraduate = document.getElementById("chkGraduate");
if (chkGraduate.checked) {
alert("CheckBox checked.");
} else {
alert("CheckBox not checked.");
}
}
</script>
</head>
<body style="background: #E0EDFA;">
<form id="form1">
<input id="chkGraduate" type="checkbox" />
<label for="chkGraduate">Are you graduate ?</label>
<br />
<br />
<input type="button" value="Check" onclick="Check();" />
</form>
</body>
</html>
<head>
<script type="text/javascript">
function Check() {
var chkGraduate = document.getElementById("chkGraduate");
if (chkGraduate.checked) {
alert("CheckBox checked.");
} else {
alert("CheckBox not checked.");
}
}
</script>
</head>
<body style="background: #E0EDFA;">
<form id="form1">
<input id="chkGraduate" type="checkbox" />
<label for="chkGraduate">Are you graduate ?</label>
<br />
<br />
<input type="button" value="Check" onclick="Check();" />
</form>
</body>
</html>
-----: Using jQuery :-----
There are two ways to track the status of checkboxes whether it is checked or not using the jQuery :checked selector and prop() method. We explained both methods one by one with example.
(1). Using the :checked Selector -
Using the jQuery ":checked" selector, we can easily check the status of checkboxes. The ":checked" selector specifically designed for radio button and checkboxes. If the checkbox is checked then it returns "true" otherwise it returns "false".
Example-
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
function Check() {
var isChecked = $("#chkGraduate").is(":checked");
if (isChecked) {
alert("CheckBox checked.");
} else {
alert("CheckBox not checked.");
}
}
</script>
</head>
<body style="background: #E0EDFA;">
<form id="form1">
<input id="chkGraduate" type="checkbox" />
<label for="chkGraduate">Are you graduate ?</label>
<br />
<br />
<input type="button" value="Check" onclick="Check();" />
</form>
</body>
</html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
function Check() {
var isChecked = $("#chkGraduate").is(":checked");
if (isChecked) {
alert("CheckBox checked.");
} else {
alert("CheckBox not checked.");
}
}
</script>
</head>
<body style="background: #E0EDFA;">
<form id="form1">
<input id="chkGraduate" type="checkbox" />
<label for="chkGraduate">Are you graduate ?</label>
<br />
<br />
<input type="button" value="Check" onclick="Check();" />
</form>
</body>
</html>
(2). Using the prop() Method -
The jQuery prop() method provides an simple and reliable way to check the status of checkboxes. It works perfectly in all the conditions because every checkbox has checked property which specifie its checked or unchecked status.
If the checkbox is checked then prop() Method returns "true" otherwise it returns "false".
Note: Don't confuse with the "checked" attribute of checkbox. The "checked" attribute only define the initial state, not the current state of the checkbox.
Example-
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
function Check() {
var isChecked = $("#chkGraduate").prop("checked");
if (isChecked) {
alert("CheckBox checked.");
} else {
alert("CheckBox not checked.");
}
}
</script>
</head>
<body style="background: #E0EDFA;">
<form id="form1">
<input id="chkGraduate" type="checkbox" />
<label for="chkGraduate">Are you graduate ?</label>
<br />
<br />
<input type="button" value="Check" onclick="Check();" />
</form>
</body>
</html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
function Check() {
var isChecked = $("#chkGraduate").prop("checked");
if (isChecked) {
alert("CheckBox checked.");
} else {
alert("CheckBox not checked.");
}
}
</script>
</head>
<body style="background: #E0EDFA;">
<form id="form1">
<input id="chkGraduate" type="checkbox" />
<label for="chkGraduate">Are you graduate ?</label>
<br />
<br />
<input type="button" value="Check" onclick="Check();" />
</form>
</body>
</html>
Result:
Live Demo:
0 comments:
Post a Comment