Show table when radio button is checked

Question

At first, I request you to see these two images. image 1 image 2

There are more than 20 fields like in 'Image 1'. If select yes then show a table like in 'Image 2'. So I have 20 Yes/No field and 20 different tables. How can I show the tables if select yes. I have tried some code for a single field. As there are lots of fields I want to know is there any way to make the code minimal and easier. Here is my code that I tried:

CSS:

#show-dc-table {
  display: none;
}

Script:

<script>
$(document).ready(function() {
  $('.form-check-inline input[type="radio"]').click(function() {
    if ($(this).attr('id') == 'allergy-yes') {
      $('#show-dc-table').show();
    } else {
      $('#show-dc-table').hide();
    }
  });
});

</script>

HTML:

<div class="form-group row">
  <label class="col-sm-2 col-form-label">Do you have Allergies </label>
  <div class="col-sm-10">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="allergy" value="Yes" id="allergy-yes">
      <label class="form-check-label">Yes</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="allergy" value="No">
      <label class="form-check-label">No</label>
    </div>
  </div>
</div>
<table class="table table-striped" id="show-dc-table">
  <tr>
    <th scope="col">Alergic Reactions to</th>
    <th scope="col">Yes</th>
    <th scope="col">No</th>
    <th scope="col">Notes</th>
  </tr>
</table>

Answer 1

To make the same code work for multiple repeated HTML structures group elements by behaviour using the same class on each. Then use DOM traversal to relate the elements to each other when certain events happen.

In your case you would use closest() and next() to find the table related to the changed radio. Also note that you should use the checked property of the radio, along with the change event, to determine the value selected. Try this:

 $(document).ready(function() { $('.form-check-inline input[type="radio"]').on('change', function() { $(this).closest('.form-group').next('table').toggle(this.checked && this.value === 'Yes'); }); });

 .show-dc-table { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group row"> <label class="col-sm-2 col-form-label">Do you have allergies?</label> <div class="col-sm-10"> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="allergy" value="Yes"> <label class="form-check-label">Yes</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="allergy" value="No"> <label class="form-check-label">No</label> </div> </div> </div> <table class="table table-striped show-dc-table"> <thead> <tr> <th scope="col">Alergic Reactions to</th> <th scope="col">Yes</th> <th scope="col">No</th> <th scope="col">Notes</th> </tr> </thead> <tbody> <tr> <td>Aspirin, Ibuprofen, Codeine</td> <td><input type="radio" name="a1" /></td> <td><input type="radio" name="a2" /></td> <td><input type="text" /></td> </tr> </tbody> </table> <div class="form-group row"> <label class="col-sm-2 col-form-label">Do you have a cough?</label> <div class="col-sm-10"> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="cough" value="Yes"> <label class="form-check-label">Yes</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="cough" value="No"> <label class="form-check-label">No</label> </div> </div> </div> <table class="table table-striped show-dc-table"> <thead> <tr> <th scope="col">Alergic Reactions to</th> <th scope="col">Yes</th> <th scope="col">No</th> <th scope="col">Notes</th> </tr> </thead> <tbody> <tr> <td>Lorem ipsum</td> <td><input type="radio" name="a1" /></td> <td><input type="radio" name="a2" /></td> <td><input type="text" /></td> </tr> </tbody> </table>

Answer 2

To generalize any DOM manipulation script, do not use hardcoded ids. Use methods like closest , find , next , prev . Two methods closest , find are used in this particular example.

 $(document).ready(function() { $('.form-check-inline input[type="radio"]').click(function() { if ($(this).val() == 'Yes') { $(this).closest('.form-group').next('table').show(); } else { $(this).closest('.form-group').next('table').hide(); } }); });

 .table.table-striped { display: none }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="form-group row"> <label class="col-sm-2 col-form-label">Do you have Allergies </label> <div class="col-sm-10"> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="allergy" value="Yes" id="allergy-yes"> <label class="form-check-label">Yes</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="allergy" value="No"> <label class="form-check-label">No</label> </div> </div> </div> <table class="table table-striped" id="show-dc-table"> <tr> <th scope="col">Alergic Reactions to</th> <th scope="col">Yes</th> <th scope="col">No</th> <th scope="col">Notes</th> </tr> </table>