1

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

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

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

When "A" is selected, I need "X" to be auto-selected. 这样选择X时，需要显示Div-01。

When "B" is selected, I need "Y" to be auto-selected. 以这种方式选择 Y 时，需要显示 Div-02。

ETC...

我一直在拼凑不同的 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 显示的 CSS：

.testfields div{
    display: none;
}

DIV 显示的 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>

谢谢！

4

1 回答 1

0

您应该使用 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');
                });
            }
于 2013-06-19T06:09:44.303 回答