javascript - jQuery .toggle 不适用于 CSS 交集

Question

我试图在单击单选按钮时切换 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

Answer 1

toggle()方法接受一个 bool 值来显示或隐藏:

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