javascript - 切换 Div 对单选按钮选择问题的可见性

Question

我已成功使用以下代码创建了 Div 可见性切换:

$('input[name="type"]').on('change', function() {
    var show = $(this).val();
    $(".typechoice").hide();
    $("#"+show).show();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio"  name="type" value="solo" checked ;> solo<br>
<input type="radio"  name="type" value="company" ;> company<br>

<div id="solo" class="typechoice">Solo</div>
<div id="company" class="typechoice">Company</div>

它工作得很好，但在页面第一次加载时就不行了(两个 Div 都可见，而不是只有一个 Div)。我认为这是因为 onchange 在 JS 中使用(我不是专家，并且在不同的堆栈溢出线程上抓取了位)

当用户执行任何操作之前页面上已选中单选按钮时，如何让此代码起作用？

Answer 1

只需使用以下行触发选中复选框的更改事件即可最初隐藏另一个 div。

$('input[name="type"]:checked').change()

完整代码

$('input[name="type"]').on('change', function() {
  var show = $(this).val();
  $(".typechoice").hide();
  $("#" + show).show();
})
$('input[name="type"]:checked').change()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="type" value="solo" checked ;> solo
<br>
<input type="radio" name="type" value="company" ;> company
<br>

<div id="solo" class="typechoice">AAAA</div>
<div id="company" class="typechoice">BBBB</div>