时间戳

首页 > 解决方案 > 选中单选按钮时显示表格

javascript - 选中单选按钮时显示表格

问题描述

首先，我要求你看看这两张图片。 图 1 图 2

有 20 多个字段，如“图像 1”。如果选择是，则显示类似于“图像 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>

标签： javascripthtmljquerycss

解决方案

要使相同的代码适用于多个重复的 HTML 结构，请按行为对每个元素使用相同的类。然后在某些事件发生时使用 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>

推荐阅读