选择单选按钮时不会显示正确的字段

Question

我一直在尝试获得以下代码，以根据所选的单选按钮显示相应的表行。现在的情况是，一旦你在按钮之间选择，行就会停止工作，不再切换。如果我将单选按钮切换到复选框，代码运行得很好。

var $options = $('[id^="option"]');
$options.on('change', function() {
var $elementsToToggle = $('.' + this.value);
if (this.checked) {
$elementsToToggle.show();
} else {
$elementsToToggle.each(function() {
var hide = true,
elementToToggle = this;
$options.each(function() {
var optionClass = this.value,
optionValue = this.checked;
if (elementToToggle.classList.contains(optionClass) && optionValue)
hide = false;
});
if (hide === true)
$(elementToToggle).hide();
});
}
});

.option1,
.option2,
.option3,
.option4 {
display: none;
}
.show {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="option1btn" type="radio" value="option1" name="test">
<input id="option2btn" type="radio" value="option2" name="test">
<input id="option3btn" type="radio" value="option3" name="test">
<input id="option4btn" type="radio" value="option4" name="test">
<table id="optionTable">
<tr class="option1">
<td>option1</td>
</tr>
<tr class="option1">
<td>option1</td>
</tr>
<tr class="option2 option4">
<td>option2 option4</td>
</tr>
<tr class="option1 option4">
<td>option1 option4</td>
</tr>
<tr class="option4">
<td>option4</td>
</tr>
<tr class="option1 option3 option4">
<td>option1 option3 option4</td>
</tr>
<tr class="option4">
<td>option4</td>
</tr>
</table>

Answer 1

只要<tr>的类不是单选按钮id的一部分，就隐藏它。

您的代码的问题是它根本没有输入else，因为this.checked在change函数中总是正确的。因此，其他<tr>在切换后没有被隐藏。

var $options = $('[id^="option"]');
var $elements = $('[class^="option"]');
$options.on('change', function() {
var $elementsToToggle = $('.' + this.value);
if (this.checked) {
$elementsToToggle.show();
elementToToggle = this;
var optionClass = this.value,
optionValue = this.checked;
$elements.each(function(idx,element) {
var hide = true;
if (element.classList.contains(optionClass) && optionValue)
hide = false;
if (hide === true)
$(element).hide();
});   
} 
});

.option1,
.option2,
.option3,
.option4 {
display: none;
}
.show {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="option1btn" type="radio" value="option1" name="test">
<input id="option2btn" type="radio" value="option2" name="test">
<input id="option3btn" type="radio" value="option3" name="test">
<input id="option4btn" type="radio" value="option4" name="test">
<table id="optionTable">
<tr class="option1">
<td>option1</td>
</tr>
<tr class="option1">
<td>option1</td>
</tr>
<tr class="option2 option4">
<td>option2 option4</td>
</tr>
<tr class="option1 option4">
<td>option1 option4</td>
</tr>
<tr class="option4">
<td>option4</td>
</tr>
<tr class="option1 option3 option4">
<td>option1 option3 option4</td>
</tr>
<tr class="option4">
<td>option4</td>
</tr>
</table>

Answer 2

var $options = $('[id^="option"]');
ShowHideTr('option1')
$options.on('change', function() {
var text = $(this).val();
ShowHideTr(text);
});
function ShowHideTr(text)
{
$('#optionTable tbody tr').each(function () {

if($(this).children("td:eq(0)").html().indexOf(text) != -1)
$(this).addClass('show');
else
$(this).removeClass('show');
});
}

.option1,
.option2,
.option3,
.option4 {
display: none;
}
.show {
display: block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="option1btn" type="radio" value="option1" name="test" checked>
<input id="option2btn" type="radio" value="option2" name="test">
<input id="option3btn" type="radio" value="option3" name="test">
<input id="option4btn" type="radio" value="option4" name="test">
<table id="optionTable">
<tr class="option1">
<td>option1</td>
</tr>
<tr class="option1">
<td>option1</td>
</tr>
<tr class="option2 option4">
<td>option2 option4</td>
</tr>
<tr class="option1 option4">
<td>option1 option4</td>
</tr>
<tr class="option4">
<td>option4</td>
</tr>
<tr class="option1 option3 option4">
<td>option1 option3 option4</td>
</tr>
<tr class="option4">
<td>option4</td>
</tr>
</table>

Answer 3

我想尝试一个不同于单选按钮"change"的事件，请查看此处：https://www.w3schools.com/tags/ref_eventattributes.asp