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

Question

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

我想要的是：

用于随页面加载的元素，因为它会自动选择是，如果选择 'no' 则显示另一个元素

或：

None 最初在广播组中被选中。让用户单击其中一个（但不能同时单击）。使用单选框或复选框进行修改 (jQuery)。

这是第一个元素 show/hide 的代码。

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

更新 fiddle：http://jsfiddle.net/35gwgtjL/2/

注意：在fiddle上，如果去掉这段js代码，即使默认选中"Yes"，也不会显示div.

内容

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

Converting a jQuery fadeIn() fadeOut checkbox to radio button

html

javascript