javascript - 根据单选选择在多个 DIV 中显示切换的 DIV

Question

我在一个表单中有多个 DIV。每个 DIV 内部都有两个单选按钮和两个 DIV。第一个单选按钮始终处于选中状态，因此一个 DIV 内容将显示，而另一个则隐藏。选中后，应切换第二个单选按钮 DIV 显示。

我尝试了基于 https://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-show-hide-div-using-radio-button 的解决方案

但是当我在多个 DIV 中使用复选框时，我无法获得所需的解决方案。谁能帮我解决这个问题。

<form>

<div id="A">
<label><input checked="checked" type="radio" name="colorRadio" value="red">1st radio button[div A]</label>
<label><input type="radio" name="colorRadio" value="green">2nd radio button[div A]</label>
<div id="1" class="red">Content in Div 1</div>
<div id="2" class="green">Content in Div 2</div>
</div>


<div id="B">
<label><input checked="checked" type="radio" name="colorRadio" value="red2">1st radio button[div B]</label>
<label><input type="radio" name="colorRadio" value="green2">2nd radio button[div B]</label>
<div id="3" class="red2">Content in Div 3</div>
<div id="4" class="green2">Content in Div 4</div>
</div>

</form>

<script type="text/javascript">
$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        var inputValue = $(this).attr("value");
        var targetBox = $("." + inputValue);
        $(".box").not(targetBox).hide();
        $(targetBox).show();
    });
});
</script>

Answer 1

这是一个有关如何执行此操作的示例。首先，有几点建议。

(1) ID 不能以数字开头，必须以字母开头

(2) 每个单选按钮组中只能选择一个单选按钮(组由 name=xxxxx 属性标识)。因此，要么有两个单选按钮组(如我的示例)，要么接受如果选择 Btn3，则不能选择 Btn1。

$('input[type="radio"]').click(function(){
    var activeid = $(this).data('id');
    var div2use = $(this).closest('.bobDiv');
    var subdivs = $(this).closest('.bobDiv').find('div.box');
    $.each( subdivs, function(){
        var tst = this.id;
        if ( tst == activeid){
            $(this).addClass('myactive');
        }else{
            $(this).removeClass('myactive');
        }
    });
});

form{display:flex;}
#a, #b{flex:1;}
.box{background:pink;border:1px solid yellow;display:none;}
.myactive{display:block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<form>
  <div id="a" class="bobDiv">
    <label><input data-id="a1" checked type="radio" name="colorRadio" value="red">Btn1 [div1]</label>
    <label><input data-id="a2" type="radio" name="colorRadio" value="green">Btn2 [div1]</label>
    <div id="a1" class="red box myactive">1</div>
    <div id="a2" class="green box">2</div>
  </div>
  
  <div id="b" class="bobDiv">
    <label><input data-id="a3" checked type="radio" name="colorRadio2" value="red2">Btn1 [div2]</label>
    <label><input data-id="a4" type="radio" name="colorRadio2" value="green2">Btn2 [div2]</label>
    <div id="a3" class="red2 box myactive">3</div>
    <div id="a4" class="green2 box">4</div>
  </div>

</form>