javascript - 根据选定的单选按钮更改选项值

Question

我有 1 个要求要实现。

1) 根据选择的单选按钮隐藏/取消隐藏选择标签

代码笔: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 .

此外，您实际上不需要使用 $(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 .

希望对您有所帮助! :)