使用单选按钮打开/关闭选择表列(默认关闭)

Question

>我有一个基本的表，它应该只在加载时显示名字和姓氏列。用户可以切换单选按钮以一次显示一个额外的列。问题是切换无法正常工作，用户可以一次看到多个额外的列。此外，加载表时，不会隐藏额外的列。我为复选框工作，但是当我调整单选按钮时，它导致了这些问题。

$('input[type="radio"]').each(function() {
var inputValue = "table ." + $(this).attr("name");
$(inputValue).hide();
});


$('input[type="radio"]').click(function(){
var inputValue = "table ." + $(this).attr("value");
$(inputValue).toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Select a column to show. You can only show one extra column from the options below at a time.</p>
<input type="radio" name="extraCol" id="age" value="age">
<label for="age">Age</label>
<input type="radio" name="extraCol" id="gender" value="gender">
<label for="gender">Gender</label>
<input type="radio" name="extraCol" id="hometown" value="hometown">
<label for="hometown">Hometown</label>
<input type="radio" name="extraCol" id="off" value="off" checked>
<label for="off">Don't show</label>;

<table>
<tr>
<th>First name</th>
<th>Last name</th>
<th class="age">Age</th>
<th class="gender">Gender</th>
<th class="hometown">Hometown</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td class="age">50</td>
<td class="gender">Female</td>
<td class="hometown">Springfield</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td class="age">94</td>
<td class="gender">Female</td>
<td class="hometown">South Park</td>
</tr>
</table>

Answer 1

您需要loop单选按钮以隐藏使用$(this).val()显示的其他列，这将为我们提供单选按钮值，并使用它隐藏。

演示代码：

$('input[type="radio"]').each(function() {
//get the value of radio button
var inputValue = "table ." + $(this).val();
$(inputValue).hide();
});

$('input[type="radio"]').click(function() {
//first check all radio hide all other columns
$('input[type="radio"]').each(function() {
var inputValue = "table ." + $(this).val();
$(inputValue).hide();
});
//show only the column which is clicked
var inputValue = "table ." + $(this).attr("value");
$(inputValue).toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Select a column to show. You can only show one extra column from the options below at a time.</p>
<input type="radio" name="extraCol" id="age" value="age">
<label for="age">Age</label>
<input type="radio" name="extraCol" id="gender" value="gender">
<label for="gender">Gender</label>
<input type="radio" name="extraCol" id="hometown" value="hometown">
<label for="hometown">Hometown</label>
<input type="radio" name="extraCol" id="off" value="off" checked>
<label for="off">Don't show</label>;
<table>
<tr>
<th>First name</th>
<th>Last name</th>
<th class="age">Age</th>
<th class="gender">Gender</th>
<th class="hometown">Hometown</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td class="age">50</td>
<td class="gender">Female</td>
<td class="hometown">Springfield</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td class="age">94</td>
<td class="gender">Female</td>
<td class="hometown">South Park</td>
</tr>
</table>