javascript - 根据单选按钮选择显示/隐藏内容

Question

我正在尝试根据单选按钮的选择来切换内容 DIV。

单选按钮的 HTML。

<div class="row-fluid">
    <label class="radio">
      <input type="radio" name="account" id="yes" value="yes" checked>
      Yes, I have an existing account
    </label>
    <label class="radio">
      <input type="radio" name="account" id="no" value="no">
      No, I don't have an account
    </label>
</div>

内容分区

<div id="account_contents">
    <p>This is account contents.......</p>  
</div>

这就是我在 jquery 中尝试的方式。

$('#no').bind('change',function(){
  $('#account_contents').fadeToggle(!$(this).is(':checked'));
  $('#account_contents').find("input").val("");
  $('#account_contents').find('select option:first').prop('selected',true);
});

但它不适合我。在这里，我只想在用户没有帐户时显示此内容 DIV。

谁能告诉我如何解决这个问题？

Answer 1

似乎你需要 .on('change') 单选按钮，而不仅仅是其中一个

$('input[type="radio"][name="account"]').on('change',function(){
  var ThisIt = $(this);
  if(ThisIt.val() == "yes"){
       // when user select yes
       $('#account_contents').fadeOut();
  }else{
       // when user select no
       $('#account_contents').fadeIn();
       $('#account_contents').find("input").val("");
       $('#account_contents').find('select option:first').prop('selected',true);
  }
});

Working Example