将 jQuery fadeIn() 淡出复选框转换为单选按钮

Question

我让这段代码适用于是否复选框，但愚蠢的是，它们显然都可以选中。我想使用单选按钮，但是，是会立即突出显示，该元素仍然隐藏。

我想要的是：

对于要随页面一起加载的元素，因为它会自动选择"是"，如果选择了"否"，则显示另一个元素

或：

最初不会在单选机组上选择任何选项。让用户单击其中一个（但不能同时单击两个）。使用Radio或Checkbox（jQuery）进行平衡。

这是第一个元素的显示/隐藏代码。

$('#common_restaurant_seperate_sittings_yes').click(function(){
  if($('#common_restaurant_seperate_sittings_yes').is(':checked')) {
    $('#opening_times_seperate_sittings').fadeIn(700);
  } else {
    $('#opening_times_seperate_sittings').fadeOut(700);   
  }
});

°

<div id="opening_times_seperate_sittings">content</div>

<input type="radio" class="checkbox_style" name="common_restaurant_seperate_sittings_yes" id="common_restaurant_seperate_sittings_yes" label="Yes" />
<input type="radio" class="checkbox_style" name="common_restaurant_seperate_sittings_yes" id="common_restaurant_seperate_sittings_no" label="No" />

Answer 1

由于我不知道您的 HTML，我认为它会简要地如下所示：

<input type="radio" class="yesNo" value="yes" name="yesNo"/> Yes
<input type="radio" class="yesNo" value="no" name="yesNo"/> No
<div id="opening_times_seperate_sittings">This content is only to be shown when Yes is selected</div>

现在，由于您要使用单选按钮，因此可以对它们进行分组，一次只允许选择其中一个。然后，正如您在代码中已经拥有的那样，js 将如下所示：

$('.yesNo').on('click', function(){
  if($(this).val() == 'yes') {
      $('#opening_times_seperate_sittings').fadeIn(700);
  } else {
      $('#opening_times_seperate_sittings').fadeOut(700);   
  }
});

这是一个演示： http://jsfiddle.net/35gwgtjL/1/

更新：

If "Yes" is selected by default, you can add a check on your page load to check if Yes is selected:
if($('.yesNo[value="yes"]').attr('checked')=='checked'){
  $('#opening_times_seperate_sittings').show();
}

更新小提琴：http://jsfiddle.net/35gwgtjL/2/

注意：在小提琴上，如果删除此js代码，即使默认情况下选择"是"，它也不会显示内容div。