前提
以下のようなテーブルがあり、「追加」ボタンを押すと同じテーブルが下に追加されるようになっています。
ラジオボタンA、B、Cを押すと、行(11111/22222/33333)の表示・非表示が切り替わります。
実現したいこと
ラジオボタンA、B、Cを押したときの行の表示・非表示はテーブルごとに反映させたい。
キャプチャの青枠の中という意味になります。
発生している問題・エラーメッセージ
「追加」ボタンでテーブルを追加。
ラジオボタンA、B、Cいずれかを押した際、そのテーブルだけでなく、他のテーブルも表示・非表示が切り替わる。
ラジオボタンが全てに連動してしまっている。
該当のソースコード
HTML
1<tbody class="rowadd"> 2 <tr> 3 <th rowspan="3" class="aaa"> 4 <th> 5 ***** 6 </th> 7 </th> 8 <td> 9 //JSPのタグでラジオボタンを表示 10 <***** onchange="displayChange(this);" /> 11 </td> 12 <tr> 13 <tr class="111111"> 14 <th> 15 ***** 16 </th> 17 </tr> 18 ・ 19 ・ 20 ・ 21 </tbody> 22
Javascript
1 function displayChange(input) { 2 3 jQuery(input).parents("tbody.rowadd:first"); 4 const chooseRadio= jQuery(input).val(); 5 switch (chooseRadio){ 6 case "01": //ラジオボタンA 7 jQuery(".111111").show(); 8 jQuery(".22222").hide(); 9 jQuery(".33333").hide(); 10 ・ 11 ・ 12 ・ 13 break; 14 ・ 15 ・ 16 ・ 17 } 18 }
試したこと
上記のように実装しましたが、ラジオボタンが連動してしまいます。
解決に至らない為、有識者の方、ご教示いただきたくお願いいたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。