How To Display Text when a Checkbox is Checked?

Today, We want to share with you show hide textbox when checkbox is checked and unchecked.In this post we will show you JavaScript CheckBox ShowHide Div Example, hear for ShowHide DIV with TextBox when CheckBox is checked unchecked using JavaScript and jQuery we will give you demo and example for implement.In this post, we will learn about PHP Multiple Checkbox Array Handling with an example.

Show/hide text box based on check box

Example 1: index.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
      $(function () {
            $("#chkPassport2").click(function () {
                if ($(this).is(":checked")) {
                    $("#dvPassport2").show();
                } else {
                    $("#dvPassport2").hide();
                }
            });
        });
</script>
</head>
<body>
 <h2>Show Hide DIV with TextBox when CheckBox is checked unchecked using jQuery</h2>
    <br />
    <br />
    <label for="chkPassport2">
        <input type="checkbox" id="chkPassport2" />
        Do you have Passport?
    </label>
    <br />
    <div id="dvPassport2" style="display: none">
        Passport Number:
        <input type="text" id="Text1" />
    </div>
</body>
</html>

Example 2: index.html

<!DOCTYPE html>
<html>
<head>
<style>
.answer {
  display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function valueChanged() {
  if($('.promocode_question').is(":checked"))   
    $(".answer").show();
  else
    $(".answer").hide();
};
</script>
</head>
<body>

   <fieldset class="question">
       <label for="promocode_question">Do you have a promocode?</label>
       <input class="promocode_question" type="checkbox" name="promocode_question" value="1" onchange="valueChanged()"/>
       <span class="item-text">Yes</span>
   </fieldset>

   <fieldset class="answer">
       <label for="promocode_field">Your promocode:</label>
       <input type="text" name="promocode_field" id="promocode_field"/>
   </fieldset>

</body>
</html>

I hope you get an idea about when checkbox is checked show popup.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.