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()

完整代码

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

最简单的方法是在change()

中的已检查电台上拨打document.ready()

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

也许您可以提取更改功能并在加载页面时调用它：

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/

在radion按钮选择问题时切换Div可见性

4 个答案: