如果選中或取消選中組的單選按鈕，如何顯示或隱藏div？

Question

我有一組單選按鈕，如果該組中的一個按鈕被選中出現一個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/

Answer 1

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

固定碼，希望幫助？

Answer 2

我已經凝聚你的代碼一點點：

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

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

JS Fiddle demo。

參考文獻：

• attribute-starts-with [attribute^="value"] selector
• hide()。
• show()。

Answer 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/

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

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