javascript - 如果选中单选按钮则隐藏内容

Question

如果使用change()函数检查单选按钮，我试图隐藏一个段落，但它不起作用。我错过了什么？

$(".js-rate-type").change(function(){  
    if(this.checked){
      $(".js-rate-type-content").show();
    }else{
      $('.js-rate-type-content').hide();
    }
}).change(); 

<强> jsFiddle

Answer 1

当您选择另一个同名的单选按钮时，不会触发 change 事件处理程序，因此您需要将句柄绑定(bind)到两个单选按钮

$('input[name="optionsRadios"]').change(function() {
  $(".js-rate-type-content").toggle($('.js-rate-type').is(':checked'));
}).change(); //trigger change to see changes

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-6">

      <form action="#">

        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" class="js-rate-type">Daily
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios">Fixed
          </label>
        </div>

      </form>

      <p class="js-rate-type-content">Lorem ipsum dolor sit.</p>


    </div>
  </div>
</div>