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