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

Question

这与我在以下问题上的另一个问题非常相似：

如何根据枚举值隐藏和显示命名的div？

不过，这里的想法略有不同。 jQuery函数toggle（）与一个单选按钮相关，其代码如下：

<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> 

Answer 2

没有看到提供的代码上带有select标签的元素，可以input 。 将select替换为如下input ：

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

Answer 3

  $(document).ready(function() { $('input:radio[name=recurrent]').on('change', function () { var values = this.value; $('#ifRecurrentTrue').toggle(values =='true'); }).change(); }); 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/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>