特定のラジオボタンが選択された時に、自動で選択されるラジオボタンを作成したいです。

Question

前提・実現したいこと

特定のラジオボタンが選択された時に、自動で選択されるラジオボタンを作成したいです。

現在、
ラジオボタンAをクリック→ラジオボタンCが表示されて、ラジオボタンDが非表示
ラジオボタンBをクリック→ラジオボタンCが非表示になり、ラジオボタンDが表示

ここに、ラジオボタンAをクリックすると、ラジオボタンCにチェックが入り、
ラジオボタンBをクリックすると、ラジオボタンDにチェックが入るという仕組みを作りたいです。

該当のソースコード

-----------以下、ラジオボタンA～Bに該当----------
 @foreach($XXX as $id => $YYY)
<tr>
          <label class="radio"  name="choice1">
            <input type="radio" name="A-NAME" value="{{$id}}" 
                  @if($loop->first)
                  @endif  onclick="formSwitch()">
            <span class="radio-icon"></span>
          </label>
</tr>
@endforeach
--------------------以下ラジオボタンC～Dに該当----------------------

<tr id="C">
<th>
              <label class="radio" name="choice2">
                <input type="radio" name="C-NAME" value="2">
                <span class="radio-icon"></span>
              </label>

 </tr>
<tr id="D">
              <label class="radio" name="choice3">
                <input type="radio" name="D-NAME" value="3" >
                <span class="radio-icon"></span>
              </label>
</tr>

      <script>
        function formSwitch() {
        hoge = document.getElementsByName('A-NAME')
        if (hoge[0].checked) {
            document.getElementById('C').style.display = "";
            document.getElementById('D').style.display = "none";
            document.getElementByName('choice2').checked = "checked";
        } else {
          document.getElementById('C').style.display = "none";
            document.getElementById('D').style.display = "";
            document.getElementByName('choice3').checked = "checked";
        }
      }
        window.addEventListener('click', formSwitch);
      </script>

試したこと

ラジオボタンの表示非表示を制限するIF文内に、チェックを入れる要素を追加

（最近、エンジニアの方が急遽やめてしまい、エンジニア未経験で、
上記のコードを作成している為、プログラミング的に根本から間違っていたら申し訳ございません。）

こんなことから学んだら？といった点も含めご教示いただけますと幸いです。

Comments

[yambejp]

HTMLで簡単な例を記載ください

[Lhankor_Mhy]

getElementByClass というメソッドは存在しないですが、これは実際のコードそのままですか？

https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

[wokapi]

ありがとうございます。関係しない部分のコードの排除と、ご指摘ただいた部分の表記を修正いたしました。

Answer 1

ラベルではなく、Input部分にIDを設定し、document.getElementById(' ').checked = "checked";とした。

<tr id="C"> <th> <label class="radio"> <input type="radio" name="C-NAME" id="C-ID" value="2"> <span class="radio-icon"></span> </label> </tr> <tr id="D"> <label class="radio"> <input type="radio" name="D-NAME" id="D-ID" value="3" > <span class="radio-icon"></span> </label> </tr>

  <script>
    function formSwitch() {
    hoge = document.getElementsByName('A-NAME')
    if (hoge[0].checked) {
        document.getElementById('C').style.display = "";
        document.getElementById('D').style.display = "none";
        document.getElementById('C-ID').checked = "checked";
    } else {
      document.getElementById('C').style.display = "none";
        document.getElementById('D').style.display = "";
        document.getElementById('D-ID').checked = "checked";
    }
  }
    window.addEventListener('click', formSwitch);
  </script>