Отображение переключенных DIV в нескольких DIV на основе выбора радио

Question

У меня есть несколько DIVs в форме.Каждый DIV имеет два переключателя и два DIV внутри.Первый переключатель всегда ПРОВЕРЕН, поэтому один DIV-контент должен отображаться, а другой скрывается.Когда установлен этот флажок, переключатель переключателей DIVs должен переключаться.

Я пробовал решение на основе 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) Идентификаторы не могут начинаться с цифры, должны начинаться с буквы

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