选中单选按钮时显示表格

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() {&nbsp; $('.form-check-inline input[type="radio"]').on('change', function() {&nbsp; &nbsp; $(this).closest('.form-group').next('table').toggle(this.checked && this.value === 'Yes');&nbsp; });});.show-dc-table {&nbsp; display: none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="form-group row">&nbsp; <label class="col-sm-2 col-form-label">Do you have allergies?</label>&nbsp; <div class="col-sm-10">&nbsp; &nbsp; <div class="form-check form-check-inline">&nbsp; &nbsp; &nbsp; <input class="form-check-input" type="radio" name="allergy" value="Yes">&nbsp; &nbsp; &nbsp; <label class="form-check-label">Yes</label>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="form-check form-check-inline">&nbsp; &nbsp; &nbsp; <input class="form-check-input" type="radio" name="allergy" value="No">&nbsp; &nbsp; &nbsp; <label class="form-check-label">No</label>&nbsp; &nbsp; </div>&nbsp; </div></div><table class="table table-striped show-dc-table">&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th scope="col">Alergic Reactions to</th>&nbsp; &nbsp; &nbsp; <th scope="col">Yes</th>&nbsp; &nbsp; &nbsp; <th scope="col">No</th>&nbsp; &nbsp; &nbsp; <th scope="col">Notes</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>Aspirin, Ibuprofen, Codeine</td>&nbsp; &nbsp; &nbsp; <td><input type="radio" name="a1" /></td>&nbsp; &nbsp; &nbsp; <td><input type="radio" name="a2" /></td>&nbsp; &nbsp; &nbsp; <td><input type="text" /></td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table><div class="form-group row">&nbsp; <label class="col-sm-2 col-form-label">Do you have a cough?</label>&nbsp; <div class="col-sm-10">&nbsp; &nbsp; <div class="form-check form-check-inline">&nbsp; &nbsp; &nbsp; <input class="form-check-input" type="radio" name="cough" value="Yes">&nbsp; &nbsp; &nbsp; <label class="form-check-label">Yes</label>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="form-check form-check-inline">&nbsp; &nbsp; &nbsp; <input class="form-check-input" type="radio" name="cough" value="No">&nbsp; &nbsp; &nbsp; <label class="form-check-label">No</label>&nbsp; &nbsp; </div>&nbsp; </div></div><table class="table table-striped show-dc-table">&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th scope="col">Alergic Reactions to</th>&nbsp; &nbsp; &nbsp; <th scope="col">Yes</th>&nbsp; &nbsp; &nbsp; <th scope="col">No</th>&nbsp; &nbsp; &nbsp; <th scope="col">Notes</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>Lorem ipsum</td>&nbsp; &nbsp; &nbsp; <td><input type="radio" name="a1" /></td>&nbsp; &nbsp; &nbsp; <td><input type="radio" name="a2" /></td>&nbsp; &nbsp; &nbsp; <td><input type="text" /></td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>

Answer 2

要概括任何 DOM 操作脚本，请不要使用硬编码 ID。使用closest, find, next,等方法prev。在此特定示例中使用了两种方法closest。find$(document).ready(function() {&nbsp; $('.form-check-inline input[type="radio"]').click(function() {&nbsp; &nbsp; if ($(this).val() == 'Yes') {&nbsp; &nbsp; &nbsp; $(this).closest('.form-group').next('table').show();&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; $(this).closest('.form-group').next('table').hide();&nbsp; &nbsp; }&nbsp; });});.table.table-striped {&nbsp; display: none}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>&nbsp;<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"&nbsp; &nbsp; &nbsp; &nbsp; integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><div class="form-group row">&nbsp; <label class="col-sm-2 col-form-label">Do you have Allergies </label>&nbsp; <div class="col-sm-10">&nbsp; &nbsp; <div class="form-check form-check-inline">&nbsp; &nbsp; &nbsp; <input class="form-check-input" type="radio" name="allergy" value="Yes" id="allergy-yes">&nbsp; &nbsp; &nbsp; <label class="form-check-label">Yes</label>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="form-check form-check-inline">&nbsp; &nbsp; &nbsp; <input class="form-check-input" type="radio" name="allergy" value="No">&nbsp; &nbsp; &nbsp; <label class="form-check-label">No</label>&nbsp; &nbsp; </div>&nbsp; </div></div><table class="table table-striped" id="show-dc-table">&nbsp; <tr>&nbsp; &nbsp; <th scope="col">Alergic Reactions to</th>&nbsp; &nbsp; <th scope="col">Yes</th>&nbsp; &nbsp; <th scope="col">No</th>&nbsp; &nbsp; <th scope="col">Notes</th>&nbsp; </tr></table>