Category >
JAVASCRIPT
|| Published on :
Friday, September 15, 2017 || Views:
12689
||
jQuery Call function when CheckBox is checked or unchecked
Introduction
Here Pawan Kumar will explain how to jQuery: Call function when CheckBox is checked or unchecked
Description
In previous post I have explained
Top Popular Open Source E-Commerce ASP.Net Projects,
Calculator in Winform DotNet using C Sharp,
Swapping of two numbers without using third variable using dotnet with c sharp,
How to do Client Side OnCheckChanged event for ASP.Net CheckBox using JavaScript,
ASP.Net: Call JavaScript function when RadioButton is checked or unchecked,
How to Call JavaScript function when CheckBoxList is clicked (checked or unchecked) in ASP.NET, and many more articles.
Now I will explain How to jQuery: Call function when CheckBox is checked or unchecked
So follow the steps to learn jQuery: Call function when CheckBox is checked or unchecked
Javascript Codes:-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
</head>
<body>
<script type="text/javascript">
function ShowHideDiv(chkPassport) {
var dvLicence = document.getElementById("dvLicence");
dvLicence.style.display = chkPassport.checked ? "block" : "none";
}
</script>
<label for="chkPassport">
<input type="checkbox" id="chkPassport" onclick="ShowHideDiv(this)" />
Do you have Licence?
</label>
<hr />
<div id="dvLicence" style="display: none">
Licence Number:
<input type="text" id="txtPassportNumber" />
</div>
</body>
</html>
jQuery Codes:-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#chkLicence").click(function () {
if ($(this).is(":checked")) {
$("#dvLicence").show();
} else {
$("#dvLicence").hide();
}
});
});
</script>
<label for="chkLicence">
<input type="checkbox" id="chkLicence" />
Do you have Licence?
</label>
<hr />
<div id="dvLicence" style="display: none">
Licence Number:
<input type="text" id="txtPassportNumber" />
</div>
</body>
</html>
Conclusion:
So, In this tutorial we have learned, jQuery: Call function when CheckBox is checked or unchecked