$（document）.on（“ click” .. this and then that element

Question

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

当从复选框中选择wedding并且从第一个单选选项中选择了boys时，我想在该类.coaches下显示另一个单选选项容器。

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

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

但是它不起作用。

基本上，如果两个都被选中或标记，则显示.coaches。

Demo：

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

Answer 1

[$(this).is(':checked')检查是否已检查特定元素-您需要同时检查两者；

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