选择单选按钮时显示div-组合javascripts

我试图根据单选按钮组中选择的单选按钮选项显示div的内容。棘手的是，还有另一个单选按钮组一级，其选择需要控制第二个单选按钮组的选择。例如：

单选按钮组1 选项：A、B、C

单选按钮组2 选项：X、Y、Z

当选择“A”时，我需要自动选择“X”。以这种方式选择X时，需要显示Div-01

当选择“B”时，我需要自动选择“Y”。以这种方式选择Y时，需要显示Div-02

等等

我一直在拼凑不同的javascript代码片段，并能够使自动选择或“display div”功能正常工作，但决不能同时使用这两种功能。下面是我一直在使用的各种代码片段。我希望这里有人能解释一下如何修改/组合这些功能，以便所有功能都能正常工作

自动选择：

<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显示的HTML：

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

.testfields div{
    display: none;
}

<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分部的文本
第2分部的文本
第3分部的文本

表格一

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

A

B

C

表格二

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

X

Y

Z

---

谢谢

您应该使用prop而不是attr。当前代码只触发一次更改事件，即第二次选择单选按钮时，RadioGroup 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');
                });
            }

---

您可以按如下方式更改每个if条件：

if（$）.val（=“A”）{$（（输入：radio[name='radioroup2'][value='X']）.attr（'checked'，'checked'）；$（'div2'）。hide（'fast'）；$（'div3'）。hide（'fast'）；$（'div1'）。show（'fast'）

@PankajKathiriya，感谢您的回复！我用您的代码创建了一个JSFIDLE，但它不起作用。如果我做错了什么，你能检查一下并告诉我吗？谢谢你的回复！我用您的代码创建了一个JSFIDLE，但它似乎根本不起作用。你能检查一下，看看我有没有做错什么吗？您忘了选择左边的jquery和onDomReady。它按预期工作。我更新了小提琴。