HTML Jquery 单选按钮按照 select 切换

Question

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

下面的代码几乎可以满足我的要求，但问题是它是在单击时执行的。其中一个单选按钮将作为预选项出现（具有 'checked' 属性），并且在用户单击单选按钮之前不会显示说明。因此，如果预先选中其中一个按钮，我希望描述与相应的单选按钮相匹配。

$(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”（无样式内容的闪光），其中描述仅在页面完全加载后显示。

如何执行此操作将取决于您在页面加载时如何在无线电上设置 'checked' 值，因此可能不是合适的解决方案。

HTML Jquery 单选按钮按照 select 切换

HTML Jquery radio buttons switch as per select

html

javascript

css

jquery

radio-button