Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Hide and show of div based on radio click

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2.16k
    Comment on it

    A radio buttons is a form element used if we want the user to select one option from the multiple options.

    The difference between radio buttons and check boxes is that, radio button allows to select only one option from multiple options and in check boxes, multiple options can be selected.

    Below is the example of radio buttons. Only one input will be selected.

    <p>
        Male: <input type="radio" name="gender" /><br />
        Female: <input type="radio" name="gender" /><br />
        Other: <input type="radio" name="gender" />
    </p>

     

    If we want a radio button to be already checked, then we will put "checked" in input box.

    <input type="radio" name="gender" checked/>

     

    Here is the example to open a div on check of a radio button:-

    HTML-

    <span>Do you want to ask any question?</span>
    <label for="chkYes">
        <input type="radio" id="chkYes" name="chkQstn" />
        Yes
    </label>
    <label for="chkNo">
        <input type="radio" id="chkNo" name="chkQstn" />
        No
    </label>
    <hr />
    <div id="dvqstn" style="display: none">
        Ask Here:
        <input type="text" id="txtQuestion" />
    </div>

     

    jQuery-

    $(function () {
    //on click of an input whose name is chkQstn
            $("input[name='chkQstn']").click(function () {
    //it will check if the checked input has id chkYes
                if ($("#chkYes").is(":checked")) {
    //then the hidden div will be shown
                    $("#dvqstn").show();
                } else {
                    $("#dvqstn").hide();
                }
            });
     });

     

    Below is the link of above code:-

    https://jsfiddle.net/rm1dt4r2/1/

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: