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

这是因为无线电属于同一个名称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();
        }

    });

});

Fiddle

简单的show hide div与单选按钮jQuery

2 个答案: