Question

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

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

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

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

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

等...

我一直在拼凑不同的javascript片段，并且能够使自动选择或“显示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显示：

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

DIV DISPLAY的CSS：

.testfields div{
    display: none;
}

DIV DISPLAY的HTML：

<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

你应该使用prop而不是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');
                });
            }

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

1 个答案: