jQuery: Call function when CheckBox is checked or unchecked

Category > JAVASCRIPT || Published on : Friday, September 15, 2017 || Views: 9979 || 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