Show and hide html elements depending on radio selection

user_1839767 0
Viewed 79

Yes, there are many posts that are kind of similar but not like mine I guess. After struggling for a while I'm not able to come up with a solution. I need help!

I have 4 different criteria:

Resident/Single, Resident/Family, Non-Resident/Single, Non-Resident/Family

For example: if Resident and Single are checked then show that div. The rest goes the same way.

<fieldset>
  <ol id="membership">
   <li>
    <input type="radio" name="resident" value="Resident" checked="checked" /> Resident
    <input type="radio" name="resident" value="Non-Resident"  /> Non-Resident
   </li>
   <li>
    <input type="radio" name="single" value="Single" checked="checked" /> Single
    <input type="radio" name="single" value="Family"  /> Family
   </li>
 </ol>

 <div style="display: none;">
  <div>Resident/Single</div>
  <div>Resident/Family</div>
  <div>Non-Resident/Single</div>
  <div>Non-Resident/Family</div>
 </div>

</fieldset>

This is as far as I was able to go.

$(document).ready(function() {
  $('input').change(function() {
    if ($('input[value="Resident"]').is(':checked') && $('input[value="Single"]').is(':checked')) {
      $('div').show();
    } else if ($('input[value="Resident"]').is(':checked') && $('input[value="Family"]').is(':checked')) {
      $('div').show();
    } else if ($('input[value="Non-Resident"]').is(':checked') && $('input[value="Single"]').is(':checked')) {
      $('div').show();
    } else if ($('input[value="Non-Resident"]').is(':checked') && $('input[value="Family"]').is(':checked')) {
      $('div').show();
    } else {
      $('div').hide();
    }
  });
});

This is my repl: https://repl.it/@labanino/Show-based-on-selection#script.js

html jquery
2 Answers
user_62135950

Instead of using ifs statement to show/hide divs you can simply get the checked values of radio button then just loop through your divs and compare if the .text() is equal to radio values show that divs only .

Demo Code :

$(document).ready(function() {
  $(".category div:eq(0)").show() //show 1st div
  $('input').change(function() {
    //get radio values
    var value = $("input[name='resident']:checked").val();
    var value1 = $("input[name='single']:checked").val();
    console.log(value + "/" + value1)
    $(".category div").hide(); //hide all divs
    var divss = value + "/" + value1;
    //loop through divs
    $(".category div").each(function() {
      if ($(this).text() === divss) {
        $(this).show() //show that div
      }
    })
  });

})
 .category > div {
  display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
  <ol id="membership">
    <li>
      <input type="radio" name="resident" value="Resident" checked="checked" /> Resident
      <input type="radio" name="resident" value="Non-Resident" /> Non-Resident
    </li>
    <li>
      <input type="radio" name="single" value="Single" checked="checked" /> Single
      <input type="radio" name="single" value="Family" /> Family
    </li>
  </ol>

  <div class="category">
    <div>Resident/Single</div>
    <div>Resident/Family</div>
    <div>Non-Resident/Single</div>
    <div>Non-Resident/Family</div>
  </div>

</fieldset>

user_106064000
Related