ラジオボタンの切り替えでテーブルの表示切り替えを行いたいです。チェックが外れた際に該当のテーブル行を非表示にしたいです。

Question

前提・実現したいこと

ラジオボタンの切り替えでテーブル内で表示する行の切り替えを行いたいです。
別ボタンクリックで任意のボタンのチェックが外れた際に該当のテーブル行を非表示にしたいです。

発生している問題・エラーメッセージ

ラジオボタンチェックで該当行を表示するところまではできたのですが、
チェックが外れた際に非表示にする部分ができておりません。

該当のソースコード

<input unchecked type="radio" id="radio1" name="q1" onClick="click_radio('radio1','tr1');">
<input unchecked type="radio" id="radio2" name="q1" onClick="click_radio('radio2','tr2');">
<input unchecked type="radio" id="radio3" name="q1" onClick="click_radio('radio3','tr3');">
<input unchecked type="radio" id="radio4" name="q1" onClick="click_radio('radio4','tr4');">
<input unchecked type="radio" id="radio5" name="q1" onClick="click_radio('radio5','tr5');">

function click_radio(radiobuttunID,trID){
var TR = document.getElementById(trID);
var radio = document.getElementById(radiobuttunID);
if(radio.checked){
    TR.style.display = 'table-row';
  } else {
    TR.style.display = 'none';
  }
}

補足情報（FW/ツールのバージョンなど）

ラジオボタンの個数が10個ほどと数が多いため,
細かい条件分岐をかく方法は避けられると嬉しいです。

当方初心者のためお手数おかけして申し訳ございませんが、
どなたかアドバイスいただけましたら幸いです。
何卒宜しくお願い致します。

Answer 1

「有効なのは1つだけ」なのでしたら
「イベント冒頭で全部非表示にして1つだけ表示する」のが効率的かと思います。

Comments

[20200713]

こちらアドバイスいただいた方法で解決いたしました！
この度はご助言ありがとうございました。
非表示にするものの数が多いため、js内でループでかけないかチャレンジしてみます。