Javascript 将jQuery fadeIn（）淡出复选框转换为单选按钮

我让这段代码用于一个yes-no复选框，但愚蠢的是，显然它们都可以被选中。我想使用单选按钮，但是，“是”会立即高亮显示，元素仍然隐藏

我想要的是：

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

或：

最初在无线电组上选择无。让用户单击其中一个（但不能同时单击两个）。Amoplished可使用单选或复选框（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);   
  }
});

˚

内容

因为我不知道您的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>

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

下面是一个演示：

更新：

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

更新小提琴：

---

注意：在提琴上，如果你删除这个js代码，即使默认选择“是”，它也不会显示内容分区。

你能提供一个提琴吗？请在你的问题中发布一个完整的代码示例。我已经知道了。但这会直接显示元素吗？因为第一个元素是在收音机中选择的，而“我的代码”中的元素不会显示在页面加载上……您的代码中的哪个元素不会显示在页面加载上？#打开#次(分开)位置使用复选框是理想的选择。但只允许选中一个复选框。有什么想法吗？你用什么并不重要。复选框或单选按钮都可以完成此任务。如果默认情况下选择了“是”，并且您希望显示

#开始时间#单独位置

，则可以在页面加载上添加一个检查，以查看是否已选中。请参见答案中的编辑。

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