带有单选按钮jQuery的简单显示隐藏div [重复]答案

【问题标题】：Simple show hide div with radio button jQuery [duplicate]带有单选按钮jQuery的简单显示隐藏div [重复]
【发布时间】：2013-05-27 07:29:34
【问题描述】：

我有这个 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/

【问题讨论】：

$("." + divId).show(); 你选择的是一个类，而不是一个 id。使用# 而不是.
div 的类与单选框/复选框 id 相同
啊，我想如果你会添加 HTML，我会知道的。
查看此链接stackoverflow.com/q/5176803/1577396
The problem is that the currently selected radio button doesn't receive a change event when a new radio button from the group is selected.只有新选择的单选按钮会收到更改事件。

标签： jquery show-hide

【解决方案1】：

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

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

这里是更新的代码：

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

【讨论】：

这行得通，谢谢卡米尔！
第一次使用复选框然后选择按钮会发生什么
我再次更新了代码，这次也检查了选中的复选框
你的解决方案更好..

【解决方案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

【讨论】：