Question

我有一个要求，我正在努力实现。

1）根据选择的单选按钮隐藏/取消隐藏选择标记

CodePen：DEMO

用户应该只能“检查”未选中的单选按钮。例如。如果单选按钮A'已选中'，则可以选中单选按钮B，但不能检查按钮A.反之亦然。

$('#award, #year').click(function(){
// $('input[type="radio"]').not(':checked').prop('checked', false);
$("input[type='radio']").each(function() {

if($(this).is(':checked')){
  $(this).prop('checked', true);
  $('#awardOptions').toggleClass('hide');
  $('#yearOptions').toggleClass('hide'); 
}else{
  $(this).prop('checked', false);
   $('#awardOptions').toggleClass('hide');
  $('#yearOptions').toggleClass('hide'); 
}
});
});

Answer 1

问题是您的if条件正在满足，那么您的else条件也会得到满足。考虑到您在两种情况下切换目标的可见性，您实际上已成功显示正确的元素，然后立即再次隐藏它。

要解决您的问题，您实际需要做的就是完全删除else语句。这可以看作 here 。

此外，您实际上并不需要将checked prop设置为true $(this).prop('checked', true)，因为已经为真（因为逻辑输入if($(this).is(':checked'))条件）。

更新

上述问题导致点击所选输入仍然有切换。

这可以通过简单地更改逻辑以完全隔离两个行为，然后强制执行所需元素的可见性以及另一个元素的隐形来解决：

// Toggle award/year slider
$('#award').click(function(){
  $('#awardOptions').show();
  $('#yearOptions').hide(); 
});
$('#year').click(function(){
  $('#awardOptions').hide();
  $('#yearOptions').show(); 
});

这是有效的，因为无论当前状态如何，它都能起作用;隐藏和显示是明确的，而不是基于切换。

现有的CodePen已经修改为包含此内容，可以在 here 中找到。

希望这有帮助！：）

Answer 2

我为你找到了解决方案：

＆＃13;

$('#award, #year').click(function(){
  if($("input[type='radio']").is(':checked')){
    $(this).prop('checked', true);
    $('#awardOptions').addClass('hide');
    $('#yearOptions').addClass('hide'); 
    console.log("Add Class");
  }else{
    $(this).prop('checked', false);
    $('#awardOptions').removeClass('hide');
    $('#yearOptions').removeClass('hide'); 
    console.log("Remove Class");
  }
});

＆＃13;

你应该删除each（）函数，因为它会调用两次。

根据所选单选按钮更改选项值

2 个答案:

更新