单击单选按钮时如何动态显示表单字段

Question

I have three radio button choices for a question on a form. I want to achieve this effect with jquery: Based on which radio button was clicked, I want to show its associated form fields which are required for that radio button selection.

HTML:

 <div class="ss-form-question errorbox-good" role="listitem"> <div dir="ltr" class="ss-item ss-item-required ss-radio"> <div class="ss-form-entry"> <label class="ss-q-item-label" for="entry_594986466"> <div class="ss-q-title">Are you doing this for major requirements or class credit? <label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label> <span class="ss-required-asterisk" aria-hidden="true">*</span> </div> <div class="ss-q-help ss-secondary-text" dir="ltr"></div> </label> <ul class="ss-choices" role="radiogroup" aria-label="Are you doing this for major requirements or class credit? "> <li class="ss-choice-item"> <label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="majorreq" value="Major requirements" id="group_817382212_1" role="radio" class="ss-q-radio" aria-label="Major requirements" required="" aria-required="true"></span> <span class="ss-choice-label">Major requirements</span> </label> </li> <li class="ss-choice-item"> <label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="majorreq" value="Class credit" id="group_817382212_2" role="radio" class="ss-q-radio" aria-label="Class credit" required="" aria-required="true"></span> <span class="ss-choice-label">Class credit</span> </label> </li> <li class="ss-choice-item"> <label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="majorreq" value="neither, just want to help out!" id="group_817382212_3" role="radio" class="ss-q-radio" aria-label="neither, just want to help out!" required="" aria-required="true"></span> <span class="ss-choice-label">neither, just want to help out!</span> </label> </li> </ul> <div id="majorreq_require" style="display:none;color:rgb(196,59,29);">This is a required question</div> </div> </div> </div> <div class="ss-form-question errorbox-good" role="listitem" id="classnametoggle"> <div dir="ltr" class="ss-item ss-text"> <div class="ss-form-entry"> <label class="ss-q-item-label" for="entry_2016813698"> <div class="ss-q-title">If for class credit, which class is it for?</div> <div class="ss-q-help ss-secondary-text" dir="ltr">ex HDFS 395C</div> </label> <input type="text" name="whichclass" value="" class="ss-q-short" id="whichclass_input" dir="auto" aria-label="If for class credit, what class is it for? ex HDFS 395C Must contain " pattern=".*.*" title="Must contain "> <div id="whichclass_require" style="display:none;color:rgb(196,59,29);">This is a required question</div> </div> </div> </div> <div class="ss-form-question errorbox-good" role="listitem" id="classhourstoggle"> <div dir="ltr" class="ss-item ss-text"> <div class="ss-form-entry"> <label class="ss-q-item-label" for="entry_1438442595"> <div class="ss-q-title">And how many hours are required?</div> <div class="ss-q-help ss-secondary-text" dir="ltr">enter only numbers</div> </label> <input type="number" name="classhours" value="" class="ss-q-short" id="classhours_input" dir="auto" aria-label="How many hours are required for you to complete? State it in numbers Must be a number greater than 0" step="any" title="Must be a number greater than 0"> <div id="classhours_valid" style="display:none;color:rgb(196,59,29);">Please enter a number</div> <div id="classhours_require" style="display:none;color:rgb(196,59,29);">This is a required question</div> </div> </div> </div> 

The three radio button choices have an id equal to "majorreq". If the radio button for "Class credit" is selected then it should show the fields with div id's of "classnametoggle" and "classhourstoggle". It should hide these fields when the page initially loads.

How can I do this? I have searched far and wide on google but I am very confused as I am only a beginner to javascript programming. Any help would be greatly appreciated.

Answer 1

I think this is what you want, try put this into your js section script, hope this helpes.

Explanation - When radio button(Class credit) was clicked, then the div with id classnameotggle and classhourstoggle should appear, right?

 <script>
 $(document).ready(function(){
    $('#classhourstoggle, #classnametoggle').hide();

    $('input[type=radio]').on('click', function(){
       var radio_value = $(this).val();

         if(radio_value=="Class credit")
         {
             $('#classhourstoggle, #classnametoggle').show();
         }
         else
         {
             $('#classhourstoggle, #classnametoggle').hide();
         }
    });
 }); 
 </script>  

Answer 2

Try something like this:

 $(".radio").on("click", function() { var target = $(this).data("target"); $(".form-group").hide().filter("[data-target=" + target + "]").show(); }); 

 .form-group { display: none; } 

 <form> <input type="radio" class="radio" data-target="form1" /> <input type="radio" class="radio" data-target="form2" /> <input type="radio" class="radio" data-target="form3" /> <div class="form-group" data-target="form1"> </div> <div class="form-group" data-target="form2"> </div> <div class="form-group" data-target="form3"> </div> </form> 

Basically what you are doing is using the data attribute as a way to manage the relationship between radio button and DOM content. When you click a radio button, it hides all of the forms, only showing the relevant one.

You just need to add data attributes (like I have) or classes on your radio buttons and the wrappers around their related forms.