如何使用jQuery基于无线电输入显示自动隐藏的div？

Question

我有一个是/否的广播组，我想用它来显示 no 时的div。除非否已经检查过，否则在加载页面时需要隐藏div。

从yes更改为no时可以正常工作，但在页面加载时div可见。我想我最初需要测试是否检查了 euResidentNo 输入，但我无法弄清楚如何做到这一点。我也不确定这是否是达到我需要的最佳方式。感谢。

小提琴

http://jsfiddle.net/paulyabsley/2Uj9F/5/

HTML

<input type="radio" name="euResident" id="euResidentYes" value="Yes" />
<input type="radio" name="euResident" id="euResidentNo" value="No" />

<div id="div">
    ...
</div>

的jQuery

$(document).ready(function() {
    $("input[name=euResident]").change(function(){
        if($("#euResidentNo").prop("checked"))
        {
            $("#div").show();
        }
        else
        {
            $("#div").hide();
        }
    });
});

Answer 1

只需在页面加载时触发change处理程序

$('input[name=euResident]').change();

Here's a fiddle

此外，您可以将代码简化为：

$("input[name=euResident]").change(function(){
    $('#div').toggle( $('#euResidentNo').is(':checked') );
}).change(); 

Answer 2

将.change()添加到处理程序的末尾，立即调用它：

$("input[name=euResident]").change(function(){
    if($("#euResidentNo").prop("checked"))
    {
        $("#div").show();
    }
    else
    {
        $("#div").hide();
    }
}).change();

Answer 3

function switchVar() {
    if($("#euResidentNo").prop("checked"))
        $("#div").show();
    else
        $("#div").hide();
}

$(document).ready(function() {
    switchVar();
    $("input[name=euResident]").change(switchVar);
});

Fiddle

这将检查是否选中否，以及是否显示div。

Answer 4

.trigger()

$('input[name=euResident]').trigger('change');