选中单选按钮时显示表格

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()和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>