當單選按鈕被選中時顯示div - 結合javascripts

Question

我想根據單選按鈕組中選定的單選按鈕選項顯示div的內容。棘手的部分是還有另一個單選按鈕組，它們的選擇需要控制第二個單選按鈕組的選擇。例如：

單選按鈕組1 選項：A，B，C

單選按鈕組2 選項：X，Y，Z

當選擇了 「A」，我需要「X 「將被自動選擇。當以這種方式選擇X時，需要顯示Div-01。

當選擇「B」時，我需要自動選擇「Y」。當以這種方式選擇Y時，需要顯示Div-02。

等等

我被拼湊不同的JavaScript代碼段已經能夠同時獲得兩種自動選擇或「顯示格」功能工作，但不可能兼顧。以下是我一直在使用的各種片段。我希望這裏有人能闡明如何修改一些光/組合這些，因此所有的功能將工作....

自動選擇：

<script> 
$(document).ready(function(){ 
$("input[name='radiogroup1']").change(function(){ 
if($("input[name='radiogroup1']:checked").val() == "A") 
{ 
    $("input:radio[name='radiogroup2'][value='X']").attr('checked', 'checked'); 
} 
if($("input[name='radiogroup1']:checked").val() == "B") 
{ 
    $("input:radio[name='radiogroup2'][value='Y']").attr('checked', 'checked'); 
} 
if($("input[name='radiogroup1']:checked").val() == "C") 
{ 
    $("input:radio[name='radiogroup2'][value='Z']").attr('checked', 'checked'); 
} 
}); 
});</script> 

DIV顯示：

<script> 
$(document).ready(function() { 
$('#showfield1').click(function() { 
    $('#div2').hide('fast'); 
    $('#div3').hide('fast'); 
    $('#div1').show('fast'); 
}); 
$('#showfield2').click(function() { 
    $('#div1').hide('fast'); 
    $('#div3').hide('fast'); 
    $('#div2').show('fast'); 
}); 
$('#showfield3').click(function() { 
    $('#div1').hide('fast'); 
    $('#div2').hide('fast'); 
    $('#div3').show('fast'); 
}); 
}); 
</script> 

CSS的DIV DISPLAY：

.testfields div{ 
    display: none; 
} 

HTML的DIV DISPLAY：

<div class="testfields" align="center" style="padding:25px;width: 300px;"> 
        <div id="div1">Text for Div 1</div> 
        <div id="div2">Text for Div 2</div> 
        <div id="div3">Text for Div 3</div> 
       </div> 

FORM 1

<form name="form1" enctype="multipart/form-data"> 
<input type="radio" value="A" name="radiogroup1" /> A<br /> 
    <input type="radio" value="B" name="radiogroup1" /> B<br /> 
    <input type="radio" value="C" name="radiogroup1" /> C<br /> 
</form> 

FORM 2

<form name="form2" enctype="multipart/form-data"> 
<input type="radio" value="X" name="radiogroup2" id="showfield1" /> X<br /> 
    <input type="radio" value="Y" name="radiogroup2" id="showfield2" /> Y<br /> 
    <input type="radio" value="Z" name="radiogroup2" id="showfield3" /> Z<br /> 
</form> 

謝謝！

Answer 1

你應該使用道具而不是attr。您當前的代碼只觸發一次更改事件，即第二次選擇單選按鈕時，radiogroup2不會更新。以下代碼片段可以完成您正在尋找的任務。

  $("input[name='radiogroup1']").change(function() { 
       switch ($("input[name='radiogroup1']:checked").val()) { 
        case "A": 
         checkRadio(0); showField(0); 
         break; 
        case "B": 
         checkRadio(1); showField(1); 
         break; 
        case "C": 
         checkRadio(2); showField(2); 
         break; 
       } 

      }); 
      var checkRadio= function(idx) { 
       $("input:radio[name='radiogroup2']").each(function(i){ 
        if (i == idx) 
         $(this).prop('checked', 'checked'); 
        else 
         $(this).prop('checked', false); 
       }); 

      } 
      var showField = function (idx) { 
       $('.testfields div').each(function (i) { 
        if (i == idx) 
         $(this).show('fast'); 
        else 
         $(this).hide('fast'); 
       }); 
      }