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

【问题标题】：how to hide and show named divs according to radio value?如何根据单选值隐藏和显示命名的 div？
【发布时间】：2016-06-13 08:43:24
【问题描述】：

这个问题和我的另一个问题很相似：

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 值 = this.value; $('#ifRecurrentTrue').toggle(value == true); }).change();

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

再次感谢您！

【问题讨论】：

没有看到带有select标签的元素
其实应该没有。只是控制显示内容的单选按钮。这是一个错字...

标签： javascript jquery

【解决方案1】：

你需要通过名字找到input元素，所以使用属性等于选择器而不是元素选择器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>

【讨论】：

阿伦，你就是男人！只是我忘记添加到问题中的一点点。在页面加载时，<div id='recurrent'> ... </div> 应该开始关闭。
应该根据选择的收音机工作，不是吗？现在应该可以工作了
在 $('#recurrent input[name="recurrent"]').on('change', function() { 之前我添加了 $('#ifRecurrentTrue').toggle(); 初始化 div 关闭。我知道这不是很优雅，但它现在正在工作。再次感谢！
或者你可以直接说<div id="ifRecurrentTrue" style="display: none">
@gtludwig $('#ifRecurrentTrue').toggle(); 不是正确的方法，如果您更喜欢 js 这样做，请使用 $('#ifRecurrentTrue').hide();

【解决方案2】：

在提供的代码中没有看到带有select 标签的元素，可能是input。将select 替换为input，如下所示：

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

【讨论】：

感谢您的意见！

【解决方案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>

【讨论】：