How To View Input Field OnClick Of Check Box In JQuery

admin_img Posted By Bajarangi soft , Posted On 16-10-2020

In JQuery we can add input field on click of checkbox .So today we discuss in this article about adding input field on click of check box using jquery

how-to-display-input-field-onclick-of-radio-button-in-jquery

Step 1:Create index.html file and implement below code.
 

<label for="category">
    Category I  <input type="checkbox" name="answer" checked="checked" value="no"/> <br><br>
</label>

<label for="category">
    Category II <input type="checkbox" name="answer" value="yes"/> <br><br>
</label>

<label for="category">
    Other Category<input type="checkbox" id="category" /><br><br>
</label>
<div id="other_cat" style="display: none">
    Enter Your Category:<input type="text" id="txtPassportNumber" />
</div>
<div id="Add_othercat">
    Add New Password
</div>



Step 2:Implement jQuery to add new input field on click of checkbox.
 

<script>
    $(function () {
        $("#category").click(function () {
            if ($(this).is(":checked")) {
                $("#other_cat").show();
                $("#Add_othercat").hide();
            } else {
                $("#other_cat").hide();
                $("#Add_othercat").show();
            }
        });
    });
</script>


Complete Code For Displaying Input Field OnClick Of Check Box In JQuery
 

<!DOCTYPE html>
<html>
<head>
    <title>How To View Input Field OnClick Of Check Box In JQuery</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
    body {
        background: black;
    }
</style>
<body>
<div class="container">
    <br><br><br>
    <div class="text-center">
        <h1 id="color" style="color: White;">View Input Field OnClick Of Check Box In JQuery</h1>
    </div>
    <br>
    <div class="col-md-2"></div>
    <div class="col-md-8">
        <div class="well">
            <label for="category">
                Category I <input type="checkbox" name="answer" id="category1" checked="checked" value="no"/> <br><br>
            </label>

            <label for="category">
                Category II <input type="checkbox" name="answer" id="category2" value="yes"/> <br><br>
            </label>

            <label for="category">
                Other Category Name<input type="checkbox" id="category"/><br><br>
            </label>
            <div id="other_cat" style="display: none">
                Enter Your Category Name:<input type="text" id="txtPassportNumber"/>
            </div>
            <div id="Add_othercat">
                Add New Password
            </div>
            <script>
                $(function () {
                    $("#category").click(function () {
                        if ($(this).is(":checked")) {

                            $("#other_cat").show();
                            $("#Add_othercat").hide();
                        } else {
                            $("#other_cat").hide();
                            $("#Add_othercat").show();
                        }

                    });
                });
            </script>
        </div>
    </div>
    <div class="col-md-2"></div>
</div>
</body>
</html>




 

Related Post