In this article, you will learn how to get the value of a checked checkbox using jquery or javascript. There are various ways to get the checked checkbox value using jquery or javascript. In this article, to get the checked checkbox value, you can use the :checked CSS pseudo-class selector which can represent any checkbox (<input type="checkbox">) which is checked.
Here are some examples to get the value of the checked checkbox using jquery or javascript.
In this example, we used the .val() function with the :checked CSS pseudo-class selector, the .val() method with the :checked CSS pseudo-class selector can be used to get the value of checked checkbox elements. When the checkbox is not checked, then it returns undefined value.
Here is the source code of the example:
<!DOCTYPE html>
<html>
<head>
<title>
How to Get the Value of a Checked Checkbox Using Jquery or Javascript?
</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<center>
<h1 style="color: black;">Tutorials<span style="color: purple;">Rack</span></h1>
<b>
How to Get the Value of a Checked Checkbox Using Jquery or Javascript?
</b>
<p></p>
<form id="myForm">
<label>
<input type="checkbox" name="option" value="checked" />
Checked
</label>
</form>
<p>
The value of the option selected is:
<span class="output" style="color: Green; font-weight: bold;"></span>
</p>
<button id="btn">
Check option button
</button>
</center>
<script type="text/javascript">
// To Get the Checked CheckBox value.
$("#btn").on("click", function () {
output = $("input[name=option]:checked").val();
if (output !== undefined) {
$(".output").text(output);
} else {
alert("Checked the CheckBox!!");
$(".output").text("");
}
});
</script>
</body>
</html>In this example, we used the .is() method to with the :checked CSS pseudo-class selector, the .is() method used to check if one of the selected elements matches the selectorElement. When the checkbox is not checked, then it returns false value. If the checkbox is checked then it will return true.
Here is the source code of the example:
<!DOCTYPE html>
<html>
<head>
<title>
How to Get the Value of a Checked Checkbox Using Jquery or Javascript?
</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<center>
<h1 style="color: black;">Tutorials<span style="color: purple;">Rack</span></h1>
<b>
How to Get the Value of a Checked Checkbox Using Jquery or Javascript?
</b>
<p></p>
<form id="myForm">
<label>
<input type="checkbox" name="option" value="checked" />
Checked
</label>
</form>
<p>
The value of the option selected is:
<span class="output" style="color: Green; font-weight: bold;"></span>
</p>
<button id="btn">
Check option button
</button>
</center>
<script type="text/javascript">
// To Get the Checked CheckBox value.
$("#btn").on("click", function () {
output = $("input[name=option]").is(":checked");
if (output) {
var value = $("input[name=option]").val();
$(".output").text(value);
} else {
alert("Checked the CheckBox!!");
$(".output").text("");
}
});
</script>
</body>
</html>In this example, we used the .prop() method and this method sets or returns properties and values of the selected elements.
Here is the source code of the example:
<!DOCTYPE html>
<html>
<head>
<title>
How to Get the Value of a Checked Checkbox Using Jquery or Javascript?
</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<center>
<h1 style="color: black;">Tutorials<span style="color: purple;">Rack</span></h1>
<b>
How to Get the Value of a Checked Checkbox Using Jquery or Javascript?
</b>
<p></p>
<form id="myForm">
<label>
<input type="checkbox" name="option" value="checked" />
Checked
</label>
</form>
<p>
The value of the option selected is:
<span class="output" style="color: Green; font-weight: bold;"></span>
</p>
<button id="btn">
Check option button
</button>
</center>
<script type="text/javascript">
// To Get the Checked CheckBox value.
$("#btn").on("click", function () {
output = $("input[name=option]").prop("checked");
if (output) {
var value = $("input[name=option]").val();
$(".output").text(value);
} else {
alert("Checked the CheckBox!!");
$(".output").text("");
}
});
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>
How to Get the Value of a Checked Checkbox Using Jquery or Javascript?
</title>
</head>
<body>
<center>
<h1 style="color: black;">Tutorials<span style="color: purple;">Rack</span></h1>
<b>
How to Get the Value of a Checked Checkbox Using Jquery or Javascript?
</b>
<p></p>
<form id="myForm">
<label>
<input type="checkbox" name="option" value="checked" />
Checked
</label>
</form>
<p>
The value of the option selected is:
<span class="output" style="color: Green; font-weight: bold;"></span>
</p>
<button id="btn">
Check option button
</button>
</center>
<script type="text/javascript">
// To Get the Checked CheckBox value.
document.getElementById("btn").onclick = function () {
var Output = document.getElementsByName("option")[0];
if (Output.checked) {
document.getElementsByClassName("output")[0].innerText = Output.value;
} else {
alert("Checked the CheckBox!!");
document.getElementsByClassName("output")[0].innerText = "";
}
};
</script>
</body>
</html>I hope this article will help you to understand how to get the value of a checked checkbox using jquery or javascript.
Share your valuable feedback, please post your comment at the bottom of this article. Thank you!
Comments