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-content的选中状态切换.js-rate-type。

$("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() {});包装器中来告诉jQuery运行/绑定。

$(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 
})

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

3 个答案: