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

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事件处理程序，因此需要将句柄绑定到两个单选按钮。

​

$('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>

​

Answer 2

将change事件绑定到input[name=optionsRadios]，而不是.js-rate-type，并使用选中的.js-rate-type状态切换.js-rate-type-content。

$("input[name=optionsRadios]").change(function(){  
    var rateType=$('.js-rate-type')[0];
    $(".js-rate-type-content").toggle(rateType.checked);
}).change()

Answer 3

您需要让jQuery运行/绑定，方法是将它放入$(document).ready(function() {});包装器中。

$(document).ready(function() {
    $(".js-rate-type").change(function(){  
        if(this.checked){
        $(".js-rate-type-content").show();
        }else{
          $('.js-rate-type-content').hide();
      }
    }).change(); //trigger change to see changes 
})