;

How To Show and Hide Div on CheckBox Check or Uncheck Using JQuery or Javascript

Tutorialsrack 01/07/2020 Jquery Javascript

In this article, you will learn how to show and hide div on checkbox check or uncheck using jquery or javascript. There are many ways to show or hide div on checkbox check or uncheck. 

Here are some examples to show or hide div on checkbox check or uncheck using JQuery or javascript.

Example 1: Using is() Function and :checked Selector

In this example, we used the is() function and :checked selector to show or hide the div on checkbox check or uncheck using jquery.

Here is the source code of the program to show or hide the div on checkbox check or uncheck using is() function and :checked selector in JQuery.

Example 1: Using is() Function and :checked Selector
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>How To Show and Hide Div on CheckBox Check or Uncheck
          Using JQuery or Javascript?</title>
        <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    </head>
    <body>
        <label for="chkEmail">
            <input type="checkbox" id="chkEmail" />
            Do you have Email ID?
        </label>
        <hr />
        <div id="div_email" style="display: none;">
            Enter Email ID:
            <input type="text" id="txtEmail" />
        </div>
        <div id="div_addEmail">
            Add New Email ID
        </div>
        <script>
            $(function () {
                $("#chkEmail").click(function () {
                    if ($(this).is(":checked")) {
                        $("#div_email").show();
                        $("#div_addEmail").hide();
                    } else {
                        $("#div_email").hide();
                        $("#div_addEmail").show();
                    }
                });
            });
        </script>
    </body>
</html>
Markup

Example 2: Using toggle() Function

In this example, we used the toggle() function to show or hide the div on checkbox check or uncheck using jquery. The toggle() function is used to check the visibility of selected elements to toggle between hide() and show() for the selected elements. This toggle() function takes the three parameters as follows: speed, easing, callback.

Here is the source code of the program to show or hide the div on checkbox check or uncheck using the toggle() function in JQuery.

Example 2: Using toggle() Function
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>How To Show and Hide Div on CheckBox Check or Uncheck
          Using JQuery or Javascript</title>
        <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
        <style>
            .display {
                display: none;
            }
        </style>
    </head>
    <body>
        <label for="chkEmail">
            Do you have Email?&nbsp;
            <input type="checkbox" id="chkEmail" />
            &nbsp; yes
        </label>
        <hr />
        <div id="div_Email" class="display">
            Email ID:
            <input type="text" id="txtEmail" />
        </div>

        <script>
            $(function () {
                $("#chkEmail").on("click", function () {
                    $(".display").toggle(this.checked);
                });
            });
        </script>
    </body>
</html>
Markup

Example 3: Pure Javascript Reference

In this example, we are not using any jquery function. This example reference is purely javascript based.

Here is the source code of the program to show or hide the div on checkbox check or uncheck using the Javascript.

Example 3: Pure Javascript Reference
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>How To Show and Hide Div on CheckBox Check or Uncheck
          Using JQuery or Javascript?</title>
    </head>
    <body>
        <label for="chkEmail">
            Do you have Email?&nbsp;
            <input type="checkbox" id="chkEmail" onclick="myFunction()" />
            &nbsp; yes
        </label>
        <hr />
        <div id="div_Email" style="display: none;">
            Email ID:
            <input type="text" id="txtEmail" />
        </div>

        <script>
            function myFunction() {
                var checkBox = document.getElementById("chkEmail");
                var div = document.getElementById("div_Email");
                if (checkBox.checked == true) {
                    div.style.display = "block";
                } else {
                    div.style.display = "none";
                }
            }
        </script>
    </body>
</html>
Markup

I hope this article will help you to understand how to show and hide div on checkbox check or uncheck using jquery or javascript

Share your valuable feedback, please post your comment at the bottom of this article. Thank you!

Tagged: Jquery Attributes javascript Functions Jquery Functions

Related Posts


Comments

Recent Posts
Middleware vs. Filters in .NET Core
How to Create Custom Middleware in .NET Core (Older and Newer Versions)
Master Middleware in .NET Core with Examples
Understanding Local Variables and Global Variables in SQL Server
How to Declare and Assign Value to a Variable in SQL Server
How to Find All Columns Ending with a Specific Suffix in SQL Server
How to find All Tables Ending with a Specific Suffix in SQL Server
How to Return a Random Sample of Documents from a MongoDB Collection
How to Effectively “Back Up” All Deleted Rows When Using DELETE in SQL Server
How to Fix "Module not found: Error: Can't resolve 'web-vitals'" in ReactJs Projects
Tags
string vs StringBuilder string vs String convert datetime nth highest salary 2nd or 3rd highest salary palindrome C# Programs Extension method Jquery Javascript PHP SQL Server MySQL SQL functions SQL Server Functions MySQL Functions Datetime functions PHP Programs email validation Email validation using jquery and javascript LINQ Programs SQL ALTER Statement SQL DROP Statement SQL SELECT Statement MySQL SHOW Statement C# DateTime C Program Pattern Program Generate random number and strings in C# JSON String in c# DataTable in c# Jquery Attributes Data Conversion Javascript Dates Javascript Date Functions MySQL DateTime Functions C# String String SQL DateTime Functions SQL Server DateTime Functions javascript Functions Jquery Functions Python Programming Python String Python Programs Python Functions Python String Functions String Functions Regular Expression in Javascript Regular Expression in JQuery Regular Expression Validation using Javascript Validation using Jquery Data Validation Resize an Image Bitmap image Graphics Image in C# QueryString in C# QueryString Python Datetime Functions Python Date Formating Date Formatting Globalization CultureInfo System.Globalization Python Programming Examples Python Pattern Programs Python List Python Dictionary C# DataType C# Function C# String Functions Javascript String Functions Javascript Array Functions Custom Date And Time Formatting Standard Date and Time Formatting C# IP Address Python IP Address Computer Networks Computer Networks-IP Addressing Session in C# Session in ASP.NET Session in ASP.NET MVC C# Session Session State WEB API Web API Error JSON Serialization ASP.NET WEB API Error Department Wise Nth Highest Salary Difference Between Jquery Events Javascript Events HTML & CSS CSS Properties Web Design Web Development CSS Styles Regular Expression in C# ASP.NET MVC Routing Custom Routing in ASP.NET MVC Routing in ASP.NET ASP.NET Web.Config ASP.NET MVC Web.Config Web.Config Configuration Java Programs Java Basic Programs Java Programming Examples Java DateTime Java String Control Statements in Java Software Development Tools Development Tools Javascript Object Javascript Operator JavaScript Object Properties JavaScript Object Methods Javascript Errors JQuery Errors Javascript Array Array methods Javascript Array Methods C# Keywords Windows Commands NodeJs Commands Linux Commands macOS Terminal Commands Base64 Encoding and Decoding SQL Server Error SQL Server Index MongoDB DateTime MongoDB Operators MongoDB Aggregation Operators SQL Server Constraints ReactJs Errors ReactJS Error Fixes ReactJs Modules SQL Server Backup SQL Server Variables ASP.NET Core ASP.NET Core Middleware ASP.NET Core Filters