选中单选按钮时显示表格

Question

首先，我要求你看这两张图片。 图片 1 图片 2像“图片 1”中那样有 20 多个字段。如果选择“是”，则显示“图片 2”中的表格。所以我有 20 个是/否字段和 20 个不同的表。如果选择是，我如何显示表格。我已经为单个字段尝试了一些代码。由于有很多字段，我想知道有什么方法可以使代码最少化和更简单。这是我尝试过的代码：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 结构，请按行为对每个元素使用相同的类。然后在某些事件发生时使用 DOM 遍历将元素彼此关联起来。

在您的情况下，您将使用closest()and next()to findtable与更改后的收音机相关的内容。另请注意，您应该使用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>