简体   繁体   中英

Using jquery to enable div on a page based on a radio button selection

I want to be able to enable a div if yes or no was selected from a radio button using jquery. The default is no div shows up when the page loads. When you now select a radio button it determines which div shows up.

Here is what the html code will look like

        <html>
        <head>Testing</head>
        <body>
        <p>Are you 70 years and older?  <input type="radio" value="yes" name="myradiobutton" /> Yes <input type="radio" value="no" name="myradiobutton" /> No</p>

        <div style="display: none" id="yes">
            <p>Yes was selected</p>
        </div>

        <div style="display: none" id="no">
            <p>No was selected</p>
        </div>

        </body>
        </html>

It is a long time I did jquery but was wondering how I can turn this on and off with jquery below. How can I write this such that I will be able to control the styles on each div via jquery(turning it on and off based on the radio button selection)?

        $(".myradiobutton").click(function(){
            var selectedval = $("#myradiobutton input[type='radio']:checked").val();
            if(selectedval == "yes"){
                //show the yes div
            }
            if(selectedval == "no"){
                //show the no div
            }
        });

Id must be unique.. You've to use it for only one element.. You can use same class for divs so you can hide both of them in one selection.. Also you can use the code like this instead of going with if statement.. And I prefer to use change event instead of click for radio,checkbox,select

 $("[name='myradiobutton']").on('change', function(){ var selectedval = $("input[type='radio'][name='myradiobutton']:checked").val(); $('.just_test').hide(0).filter('#'+selectedval).show(); });
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Are you 70 years and older? <input type="radio" value="yes" name="myradiobutton" /> Yes <input type="radio" value="no" name="myradiobutton" /> No</p> <div style="display: none" class="just_test" id="yes"> <p>Yes was selected</p> </div> <div style="display: none" class="just_test" id="no"> <p>No was selected</p> </div>

Don't forget to add class="just_test" to the divs in html

You tried to use #myradiobutton as a query selector but the # represents the id attribute of an element which you don't have in your HTML code.

To fix it, you can't have your two <input type="radio"> elements both using the myradiobutton as id .

Instead of that, my suggestion is to use <label> to represent the <input> s.

Example below:

<input type="radio" name="age" value="yes" id="older-than-70">
<label for="older-than-70">Yes</label>
<input type="radio" name="age" value="no" id="younger-than-70">
<label for="younger-than-70">No</label>
  • <input> element uses attribute id to identify itself and uses attribute name="age" to group with other <input> s.
  • <label> element uses attribute for as a pointer to hook to the <input> with matching id .

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM