jquery - 带有单选按钮jQuery的简单显示隐藏div

Question

我有这个 jQuery：

$(document).ready(function() {

    $("input[type=radio]").change(function()
    {
        var divId = $(this).attr("id");

        if ($(this).is(":checked")) {
            $("." + divId).show();
        }
        else {
            $("." + divId).hide();
        }

    });
    $("input[type=radio]").change();

});

div 应该显示/隐藏取决于输入是否被选中/未选中

编辑：我应该提到，使用复选框，div 会显示和隐藏，但使用收音机它们只会显示 :(。

它适用于复选框，但不适用于单选按钮，这是为什么呢？

http://jsfiddle.net/qarZb/1/

Answer 1

是因为radio属于同名name='same'，所以jQuery检测到它被选中。

当您在 上触发change事件时radio，jQuery 发现选择了 1 个收音机，因此它显示了正确的 div。但是下一次，当您单击另一个时，仍然选择相同的无线电输入（属于同名组）。基本上我所做的是将类添加check到您的 div 以隐藏/显示，当在收音机上触发更改时，我将它们全部隐藏，然后只显示正确的一个。

这是更新的代码：

http://jsfiddle.net/qarZb/6/

Answer 2

这是因为您无法取消选中复选框等单选按钮。

要完成您的任务，您必须对代码进行一些更改：

$(document).ready(function() {

    $("input[type=radio]").change(function()
    {
        var divId = $(this).attr("id");

        if ($(this).is(":checked")) {
            $("." + divId).show();
            $("." + divId).siblings('[class^=check]').hide();

        }
        else {
            $("." + divId).hide();
        }

    });

});

小提琴