如果选中或未选中组的单选按钮，如何显示或隐藏 div？答案

【问题标题】：How to show or hide a div if radiobutton of a group is checked or unchecked?如果选中或未选中组的单选按钮，如何显示或隐藏 div？
【发布时间】：2012-09-16 09:52:40
【问题描述】：

我有一组单选按钮，如果选中该组中的一个按钮，则会出现 div，如果我取消选中单选按钮，则 div 会消失，

但是我没有得到它的工作，如果我选中一个框，则会出现 div，如果我选中另一个，第一个选中的单选按钮将自动取消选中，第一个出现的 div 将消失，并出现 2. div。

我尝试让该代码正常工作。下面是我的 HTML 代码：

<form>
    <label><input type="radio" name="group1" id="gruppe1"/>Gruppen</label>
    <label><input type="radio" name="group1" id="gruppe2"/>Gruppen 2</label> 
</form>

<div class="layergruppe1">
    <label>Value 1:<input type="number" name="group2" id="value1" value="0" /></label>
    <label>Value 2:<input type="number" name="group2" id="value2" value="0" /></label>
    <label>Value 3:<input type="number" name="group2" id="value3" value="0" /></label>
    <label>Value 4:<input type="number" name="group2" id="value4" value="0" /></label>
</div>

<div class="layergruppe2">
    <label>Value 1:<input type="number" name="group3" id="value1" value="0" /></label>
    <label>Value 2:<input type="number" name="group3" id="value2" value="0" /></label>
    <label>Value 3:<input type="number" name="group3" id="value3" value="0" /></label>
</div>

Javascript：

$(document).ready(function(){
    $('.layergruppe1').hide();
    $("#gruppe1").live("click", function(){
        var id = parseInt($(this).val(), 10);
        if($(this).is(":checked")) {
            $('.layergruppe1').show();
        } else {
            $('.layergruppe1').hide();
        }
    });

    $('.layergruppe2').hide();
    $("#gruppe2").live("click", function(){
        var id = parseInt($(this).val(), 10);
        if($(this).is(":checked")) {
            $('.layergruppe2').show();
        } else {
            $('.layergruppe2').hide();
        }
    });
    $('input[type=radio]').click(function(){
        if (this.previous) {
            this.checked = false;
        }
        this.previous = this.checked;
    });
});

JSFiddle：http://jsfiddle.net/EGMdK/87/

【问题讨论】：

标签： jquery html forms radio-group

【解决方案1】：

http://jsfiddle.net/EGMdK/121/

已修复代码，希望对您有所帮助？

【讨论】：

有时最好从头开始编写干净的代码，非常感谢。

【解决方案2】：

我已经稍微压缩了你的代码：

$('.layergruppe1, .layergruppe2').hide();

$('input[name="group1"]').change(
    function(){
        $('div[class^="layergruppe"]').hide();
        $('div.layer' + this.id).show();
    });

JS Fiddle demo.

参考资料：

【讨论】：

谢谢，[class^="layergruppe"] 对我来说是新的，但会学习如何将它用于更多的表单和课程:)

【解决方案3】：

http://jsfiddle.net/merakli/gAKYr/

$(document).ready(function(){
$('.layergruppe1').hide();
$('.layergruppe2').hide();
    $('input[type=radio]').change(function(e)
                                  {
        if (this.id == 'gruppe1') {
            $('.layergruppe1').show();
            $('.layergruppe2').hide();
        } else if (this.id == 'gruppe2') {
            $('.layergruppe1').hide();
            $('.layergruppe2').show();
        }  
      });
});

其他例子...

http://jsfiddle.net/merakli/EjJqS/

http://jsfiddle.net/merakli/Gu63y/

http://jsfiddle.net/merakli/ftQ8g/

http://jsfiddle.net/merakli/dW4gD/

http://jsfiddle.net/merakli/7wdp5/

【讨论】：