jQuery .toggle 不适用于 CSS 交集答案

【问题标题】：jQuery .toggle not working on CSS intersectionjQuery .toggle 不适用于 CSS 交集
【发布时间】：2016-01-10 13:15:32
【问题描述】：

我试图在单击单选按钮时切换 CSS 交叉点的可见性。不幸的是，下面的代码似乎不起作用。它在 .css('display','block') 时确实有效，但不提供所需的切换功能。

HTML：

  <div class="input">
    <label for="type">What is your aim?</label>
    <div class="radio">
      <div class="radio-el">
        <label for="dc">Data Collection</label>
        <input id="dc" type="radio" name="aim" value="dataCollection">
      </div>
      <div class="radio-el">
        <label for="inc">Opt-in Incentive</label>
        <input id="inc" type="radio" name="aim" value="incentive">
      </div>
    </div>
  </div>
  <div class="input optin">
    <p>All the additional form elements go here</p>
  </div>

CSS：

.input.optin{
  display: none;
}

JS：

$('input[type=radio][name=aim]').change(function(){
    if ($(this).val() == 'incentive') {
        $('.input.optin').toggle();
    }
})

JSFiddle

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

toggle() 方法接受一个布尔值来显示或隐藏：

$('input[type=radio][name=aim]').change(function(){
    $('.input.optin').toggle($(this).val() === 'incentive');
});

【讨论】：

这个问题是，它只有在没有 CSS 隐藏额外表单数据的情况下才有效。如果你把 css 拿走，切换就可以工作，但它已经显示了额外的表单元素。
@summer 是你要找的吗：jsfiddle.net/jmrkotoh 很抱歉，我真的很难理解你的意思？！
@Wolff 谢谢老兄。这就是我的意思。最好我会在开始时取消选中单选按钮，并且只有在单击“.incentive”单选按钮后才会出现隐藏元素。

【解决方案2】：

您不需要切换，但在特定值显示或隐藏如下：

$('input[type=radio][name=aim]').change(function() {
  if ($(this).val() == 'incentive') {
    $('.input.optin').show();
  } else {
    $('.input.optin').hide();
  }
});

正确吗？

JSFiddle for test it

【讨论】：

【解决方案3】：

您也可以使用以下代码：

$(document).ready(function(){

   $('input[type=radio][name=aim]').change(function(){
      var $x=$(this).val();
      if ($x=='incentive') {
        $('.optin').toggle();
      } else {
        $('.optin').show();
      }
    });

 });

【讨论】：