$(document).on(“ click” .. this然后是那个元素

我有1个复选框和2个单选按钮选项。

When wedding is selected from the checkbox and boys is selected from the first radio option, I want to then display another radio option container under that class .coaches.

我读过正确的方法是用逗号分隔它们,我已经这样做了:

$(document).on("click",'#wedding, #boys', function() {

但这是行不通的。

Basically, show .coaches on if both of them are checked or marked.

演示:

$('.coaches').hide();

$(document).on("click",'#wedding, #boys', function() {
  if ($(this).is(':checked')) {
    $('.coaches').show();
    $('.coaches').fadeIn();
  } else {
    $('.coaches').hide();
    $('.coaches').hide();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" id="wedding" name="wedding" value="Wedding">
<label for="wedding">Wedding</label>

<input type="radio" id="boys" name="rep" value="boys">
<span>Boys</span>

<div class="coaches">test</div>
评论
  • shift
    shift 回复

    $(this).is(':checked') checks if that particular element is checked - you need to check both;

    $('.coaches').hide();
     	
    $(document).on("click",'#wedding, #boys',function(){
      if ($('#wedding').is(':checked') && $('#boys').is(':checked')) {
        $('.coaches').show().fadeIn();
      } else {
        $('.coaches').hide();
      }
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">. 
    </script>
    <input type="checkbox" id="wedding" name="wedding" value="Wedding">
    <label for="wedding">Wedding</label>
    
    <input type="radio" id="boys" name="rep" value="boys">
    <span>Boys</span>
    
    <div class="coaches">
      test
    </div>