Question

我正在使用带有2个单选按钮的JQuery在显示和隐藏2个不同的div之间切换。我还希望能够检查页面加载（或重新加载）时的当前值，并根据当前选择的内容设置div的显示/隐藏状态。

换句话说，在点击时执行此操作，如果不是单击，则执行当前设置的任何操作。我有这个代码似乎工作正常

var type_option = $('input[name=Type]:checked', '#Form').val();
if (type_option == 'A') {
    $("#A").show();
    $("#B").hide();
} else {
    $("#A").hide();
    $("#B").show();         
}
$(".TypeSelect").click(function() {
    type_option = $('input[name=Type]:checked', '#Form').val();
    if (type_option == 'A') {
        $("#A").show();
        $("#B").hide();
    } else {
        $("#A").hide();
        $("#B").show();         
    }
});

<form>
<input type="radio" name="Type" value="A" class="TypeSelect">
<input type="radio" name="Type" value="B" class="TypeSelect">

<div id="A">A Div</div>
<div id="B">B Div</div>
</form>

但这似乎不正确或至少非常优化。我认为这可能有用

var type_option = $('input[name=Type]:checked', '#Form').val();
$(".TypeSelect").click(function() {
    type_option = $('input[name=Type]:checked', '#Form').val();
});
if (type_option == 'A') {
    $("#A").show();
    $("#B").hide();
} else {
    $("#A").hide();
    $("#B").show();         
}

但它没有，我想我必须在点击功能中设置这些div？有没有更好的方法我应该这样做或者我必须进行检查并在点击和外部点击功能中设置div来做我想要的。

Answer 1

我会将逻辑移动到一个函数，然后在页面加载和单击事件上调用它。这样的事情。

function toggle()
{
    var type_option = $('input[name=Type]:checked', '#Form').val();
    if (type_option == 'A') {
        $("#A").show();
        $("#B").hide();
    } else {
        $("#A").hide();
        $("#B").show();         
    }
}
toggle();
$(".TypeSelect").click(function() {
    toggle();
});

Answer 2

$(".TypeSelect").click(function() {
    if (this.value == 'A') {
        $("#A").show();
        $("#B").hide();
    } else {
        $("#A").hide();
        $("#B").show();         
    }
});

取决于页面的初始状态，它甚至可以更简单：

$(".TypeSelect").click(function() {
    $('#A, #B').toggle(); // Hide visible element, Show hidden element.
});

Answer 3

为什么要隐藏一个显示另一个为什么不只是将显示设置为无，并且这样做就是那里两个都没有立刻选择

<div id="A" style="display: none;">A Div</div>
<div id="B" style="display: none;">B Div</div>

    $(".TypeSelect").click(function() {
        type_option = this.value;
        if (type_option == 'A') {
            $("#A").show();
$("#B").hide();
        } else {
$("#A").show();
            $("#B").show();         
        }
    });

Answer 4

function togglify(opt) {
  $('div#' + opt).show().siblings('div').hide();  
}
$(".TypeSelect").click(function() {
    type_option = $(this).val();
    togglify(type_option);
}).filter(function() {
    type_option = $(':checked').val();
    togglify(type_option);
});

的 DEMO 的

带有单选按钮的JQuery表单控件

4 个答案: