Отображать div при выборе переключателя - объединение javascripts

Question

Я пытаюсь отобразить содержимое div на основе опции переключателя, выбранной в группе переключателей. Трудная часть состоит в том, что есть еще одна группа переключателей на один уровень, выбор которой должен управлять выбором второй группы переключателей. Например:

Radio Button Group 1 Параметры: A, B, C

Radio Button Group 2 Параметры: X, Y, Z

При выборе "А", мне нужно «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> 

ДИВ DISPLAY:

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

ФОРМА 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> 

ФОРМА 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. Ваш текущий код запускает событие изменения только один раз, т. Е. Во второй раз, когда вы выбираете радиокнопки, радиогруппа2 не обновляется. Следующий фрагмент кода делает то, что вы ищете.

  $("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'); 
       }); 
      }