HTML Jquery 单选按钮根据选择切换

Question

我有 2 个选中的单选按钮。当两个单选按钮之一被选中时，应该有一个描述，当另一个被选中时，描述应该改变。

下面的代码几乎可以满足我的要求，但问题是它是在 CLICK 上完成的。其中一个单选按钮将作为预选（带有“已选中”属性）出现，并且在用户单击单选按钮之前不会显示描述。因此，如果其中一个被预先检查，我希望描述与相应的单选按钮匹配。

$(document).ready(function(){
    $('input[name="subscription-type"]').click(function(){
        var inputValue = $(this).attr("value");
        var targetBox = $("." + inputValue);
        $(".subscription-desc").not(targetBox).hide();
        $(targetBox).show();
    });
});

.subscription-desc {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radio-toolbar-3">
    <input type="radio" id="classic" name="subscription-type" value="classic" class="choose" checked>
    <label for="classic">Classic</label>
    <input type="radio" id="adventurer" name="subscription-type" value="adventurer" class="choose">
    <label for="adventurer">Adventurer</label>
</div>
<div class="classic subscription-desc">
    Description 1
</div>
<div class="adventurer subscription-desc">
    Description 2
</div>

基本上在上面，“经典”选项将作为预选出现，但在用户单击它之前没有描述。

似乎是一个简单的问题，但我就是找不到解决方案。任何帮助表示赞赏。谢谢

Answer 1

您可以在:checked 单选按钮上触发.click 事件，以便它触发点击事件：

$('input[name="subscription-type"]:checked').click();

$(document).ready(function() {
  $('input[name="subscription-type"]').click(function() {
    var inputValue = $(this).attr("value");
    var targetBox = $("." + inputValue);
    $(".subscription-desc").not(targetBox).hide();
    $(targetBox).show();
  });

  $('input[name="subscription-type"]:checked').click();
});

.subscription-desc {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radio-toolbar-3">
  <input type="radio" id="classic" name="subscription-type" value="classic" class="choose" checked>
  <label for="classic">Classic</label>
  <input type="radio" id="adventurer" name="subscription-type" value="adventurer" class="choose">
  <label for="adventurer">Adventurer</label>
</div>
<div class="classic subscription-desc">
  Description 1
</div>
<div class="adventurer subscription-desc">
  Description 2
</div>

或者，您可以将执行显示的代码提取到一个函数中并调用它：

function updateSubscription() {
  var inp = $('input[name="subscription-type"]:checked');
  var inputValue = $(inp).attr("value");
  var targetBox = $("." + inputValue);
  $(".subscription-desc").not(targetBox).hide();
  $(targetBox).show();
}

$(document).ready(function() {
  $('input[name="subscription-type"]').click(updateSubscription);
  updateSubscription();
});

function updateSubscription() {
  var inp = $('input[name="subscription-type"]:checked');
  var inputValue = $(inp).attr("value");
  var targetBox = $("." + inputValue);
  $(".subscription-desc").not(targetBox).hide();
  $(targetBox).show();
}

$(document).ready(function() {
  $('input[name="subscription-type"]').click(updateSubscription);
  updateSubscription();
});

.subscription-desc {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radio-toolbar-3">
  <input type="radio" id="classic" name="subscription-type" value="classic" class="choose" checked>
  <label for="classic">Classic</label>
  <input type="radio" id="adventurer" name="subscription-type" value="adventurer" class="choose">
  <label for="adventurer">Adventurer</label>
</div>
<div class="classic subscription-desc">
  Description 1
</div>
<div class="adventurer subscription-desc">
  Description 2
</div>

注意你也可以使用

 var inputValue = $('input[name="subscription-type"]').val()

而不是

var inp = $('input[name="subscription-type"]:checked');
var inputValue = $(inp).attr("value");

我已将上面的代码与您的原始代码保持一致，只是将点击的 this 替换为 $('input[name="subscription-type"]:checked')

另一种选择是在加载时显示正确的描述 - 这样您也不会得到“FOUC”（无样式内容的闪烁），其中描述仅在页面完全加载后才显示。

您如何执行此操作取决于您在页面加载时如何在收音机上设置“已选中”值，因此可能不是合适的解决方案。