選中單選按鈕時顯示表格

Question

首先，我要求你看看這兩張圖片。 圖 1圖 2

有 20 多個字段，如“圖像 1”。 如果 select 是，則顯示類似於“圖像 2”的表格。 所以我有 20 個是/否字段和 20 個不同的表。 如果 select 是，我如何顯示表格。 我已經為單個字段嘗試了一些代碼。 由於有很多領域我想知道是否有任何方法可以使代碼最小化和更容易。 這是我嘗試過的代碼：

CSS：

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

腳本：

<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

為了使相同的代碼適用於多個重復的 HTML 結構，按行為對每個元素使用相同的 class 進行分組。 然后在某些事件發生時使用 DOM 遍歷將元素相互關聯。

在您的情況下，您將使用closest()和next()來查找與更改的收音機相關的table 。 另請注意，您應該使用收音機的checked屬性以及change事件來確定選定的值。 嘗試這個：

 $(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

要概括任何 DOM 操作腳本，請不要使用硬編碼的 id。 使用closest 、 find 、 next 、上一個等prev 。 在這個特定的例子中使用了兩個方法closest ， find 。

 $(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>