How to show hide TextBox on CheckBox clickltspangtDo you have Passportltspangtltinput id34chkConfirm34 type34checkbox34 gtlthr gtltinput id34txtPassportNumber34 type34text34 style34displaynone34 gt

JavaScript: Show Hide TextBox on CheckBox click

Adnaan

SOLVED CLOSED ACTIVE ANSWERED
User: Adnaan
Posted: on Feb 22, 2025 10:04 AM
Forum: JavaScript
Replies: 2
Views: 81

How to show hide TextBox on CheckBox click?

<span>Do you have Passport?</span>
<input id="chkConfirm" type="checkbox" /><hr />
<input id="txtPassportNumber" type="text" style="display:none" />

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
User: dharmendr
Replied: 9 hours ago
Report

Hi Adnaan,

Inside CheckBox click event handler, check if CheckBox is checked then show else hide the TextBox by setting the style attribute to block and none respectively.

Refer below example.

HTML

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        body { font-family: Arial; font-size: 10pt; }
    </style>
</head>
<body>
    <span>Do you have Passport?</span>
    <input id="chkConfirm" type="checkbox" onclick="ShowHideTextBox()" /><hr />
    <input id="txtPassportNumber" type="text" style="display:none" />
    <script type="text/javascript">
        function ShowHideTextBox() {
            document.getElementById("txtPassportNumber").style.display =
                document.getElementById("chkConfirm").checked ? "block" : "none";
        }
    </script>
</body>
</html>

Demo

Screenshot

Downloads

Download Sample

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Description

Description is required.

JavaScript: Show Hide TextBox on CheckBox click

Company

Explore

Follow us

Contact Us