This article will show you how you can validate given
checkbox or checkboxes are checked or not and get the checked checkbox value
using jquery.
<input id="chk1" type="checkbox" name="count" value="1">
<input id="chk2" type="checkbox" name="count" value="2">
<input id="chk3" type="checkbox" name="count" value="3">
<input id="chk4" type="checkbox" name="count" value="4">
<input id="chk5" type="checkbox" name="count" value="5">
<input id="chk6" type="checkbox" name="count" value="6">
|
After this we will add the jQuery library reference.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
|
Now check the code which we will use for validating and
getting the value of selected checkboxes.
$(document).ready(function () {
$("#btnValidate").click(function () {
$('input[name="count"]:checked').each(function () {
alert(this.value);
});
});
});
|
In above code I have validated each and every checkbox
provided, And if it is checked on that case it’s value have been displayed in
the message. If you click on button without selected nothing will happen.
Here is the complete code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery: Validate,
Test or Check if Checkbox or
Checkboxes is Checked and Get Checkbox Value</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function () {
$("#btnValidate").click(function () {
$('input[name="count"]:checked').each(function () {
alert(this.value);
});
});
});
</script>
</head>
<body>
<input id="chk1" type="checkbox" name="count" value="1">One <br />
<input id="chk2" type="checkbox" name="count" value="2">Two<br />
<input id="chk3" type="checkbox" name="count" value="3">Three<br />
<input id="chk4" type="checkbox" name="count" value="4">Four<br />
<input id="chk5" type="checkbox" name="count" value="5">Five<br />
<input id="chk6" type="checkbox" name="count" value="6">Six<br />
<input type="button" value="Validate
Checkbox" id="btnValidate" />
</body>
</html>
|
Now we have done run the application and check the output.
About the Author
0 comments:
Please let me know your view