前提・実現したいこと
特定のラジオボタンが選択された時に、自動で選択されるラジオボタンを作成したいです。
現在、
ラジオボタンAをクリック→ラジオボタンCが表示されて、ラジオボタンDが非表示
ラジオボタンBをクリック→ラジオボタンCが非表示になり、ラジオボタンDが表示
ここに、ラジオボタンAをクリックすると、ラジオボタンCにチェックが入り、
ラジオボタンBをクリックすると、ラジオボタンDにチェックが入るという仕組みを作りたいです。
該当のソースコード
-----------以下、ラジオボタンA~Bに該当---------- @foreach($SA as $id => $ABC) <tr> <td> <label class="radio"> <input type="radio" name="ship_address_id" value="{{$id}}" @if($loop->first) checked="checked" @endif onclick="formSwitch()"> <span class="radio-icon"></span> </label> @if(!$loop->first) <a href="{{route('A', $address->id)}}" class="btn btn-grey btn-block">編集</a> @endif </td> </tr> @endforeach --------------------以下ラジオボタンC~Dに該当---------------------- <tr id="C"> <th> <label class="radio" name="choice2"> <input type="radio" name="payment_method_id" value="2"> <span class="radio-icon"></span> </label> </th> </tr> <tr id="D"> <th> <label class="radio" name="choice3"> <input type="radio" name="payment_method_id" value="3" > <span class="radio-icon"></span> </label> </th> </tr> </table> <script> function formSwitch() { hoge = document.getElementsByName('ship_address_id') if (hoge[0].checked) { document.getElementById('C').style.display = ""; document.getElementById('D').style.display = "none"; document.getElementByClass('choice2').checked = "checked"; } else { document.getElementById('C').style.display = "none"; document.getElementById('D').style.display = ""; document.getElementByClass('choice3').checked = "checked"; } } window.addEventListener('click', formSwitch); </script>
試したこと
ラジオボタンの表示非表示を制限するIF文内に、チェックを入れる要素を追加
(最近、エンジニアの方が急遽やめてしまい、エンジニア未経験で、
上記のコードを作成している為、プログラミング的に根本から間違っていたら申し訳ございません。)
こんなことから学んだら?といった点も含めご教示いただけますと幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/07/13 06:32