在单选按钮选择问题后切换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）。 我认为这是因为JS中使用了onchange （我不是专家，在不同的堆栈溢出线程上都抓过一点）

如果在用户执行任何操作之前已经在页面上选中了单选按钮，那么如何使此代码起作用？

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> 

Answer 2

仅在document.ready()已检查的单选上调用change()是最简单的

 $(function(){ $('input[type=radio]:checked').change(); }); $('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> 

Answer 3

也许您可以提取change函数并在页面加载时调用它：

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

}

$(document).ready(function () {
    $('input[name="type"]').on('change', showDiv)
    showDiv();
});

Answer 4

您也可以使用如下所示的内容：

$('#'+$('input[name="type"]:checked').val()).show();

看起来很丑，但是行得通。 演示： https : //jsfiddle.net/qnwudaeL/