javascript - 如何根据单选值隐藏和显示命名的div？

Question

这个问题与我的其他问题非常相似:

how to hide and show named divs according to enum value?

不过，这里的想法略有不同。 toggle() jQuery 函数与单选按钮相关，其代码如下:

<div id="recurrent">
    <label for="recurrent">Recurrent? </label> 
    <input type="radio" id="idtrue" name="recurrent" value="true">Yes 
    <input type="radio" id="idfalse" name="recurrent" value="false" checked>No
</div>

要切换的 div 是:

<div id="ifRecurrentTrue">
    /// something
</div>

另一个问题中改编的 jQuery 是:

$('#recurrent select').on('change', function () {    var value = this.value;    $('#ifRecurrentTrue').toggle(value == true);}).change();

我敢打赌这只是功能不同的问题，对吧？

再次提前致谢!

Answer 1

您需要通过名称查找input元素，因此请使用属性equals选择器而不是元素选择器select

$('#recurrent input[name="recurrent"]').on('change', function() {
  $('#ifRecurrentTrue').toggle(this.checked && this.id == 'idtrue');
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="recurrent">
  <label for="recurrent">Recurrent?</label>
  <input type="radio" id="idtrue" name="recurrent" value="true">Yes
  <input type="radio" id="idfalse" name="recurrent" value="false" checked>No
</div>

<div id="ifRecurrentTrue">
  /// something
</div>