前提・実現したいこと
■前提
現在現場にてWebアプリを作成しています。
HTML系経験の1~2か月しかなく、全くの初心者です。
■実現したい事
WebアプリのページをJSPにて作成しています。
iteratorを利用した一覧表が三つ存在します。
その三つの表にはそれぞれラジオボタンが存在します。
〇ラジオボンタンの選択※(Bアラートの場合も)逆も同じ
・ラジオボタンはA表B表C表に関わらずラジオボタンの選択は一つのみ。
・A表のラジオボタンを選択した場合には、C表で選択していたラジオボタンがクリアされるような処理。
〇TAB切替時の処理として※(Bアラートの場合も)逆も同じ
・Aアラートを選択した状態で「Bアラート一覧TAB」に切り替えた時にはAアラートのラジオボタンをクリア。
・Cアラートを選択した状態で「Bアラート一覧TAB」に切り替えた時にはクリア処理なし。
(CアラートはTAB切り替えの対象外の為)
試した事、発生している問題(エラーメッセージ)
各ラジオボタンのname属性を同じにし、ラジオボタンを一つしか選択できないようにましたが、
タブ切替をした時に裏持ち選択しているような状態になってしまいました。
そこで、取得したラジオボタン要素?を再設定しようとしましたがすることが出来ませんでした。
===========================
jqueryにて以下の処理を実装(ラジオボタンクリア処理)をしたつもりだが、そもそも選択すら出来なくなりました。
1.一旦現在選択ラジオボタンを退避させる。
2.ラジオボタンを全てクリア(チェックを外す)する。
3.退避させたラジオボタンを再設定する。
===========================
※注意点
・strutsのiteratorタグを利用して繰り返し表示処理をしているため、IDの付与は不可。
・各それぞれのアラートは0件の場合がある。
・form句はbodyから全体を囲む設定です。
・タブ切替のjavascriptやhtmlは他チーム共通の処理方式の為、変更はしたくない。
・DIVタグを追加することはなるべくしたくない(最悪問題なし)
(補足)
javascriptでもnameをそれぞれ分け、値をべた書き判定していけば一応できましたが、
滅茶苦茶長く汎用性皆無のものとなってしまいました。
また、時期案件では同一の表(ラジオボタンや表構成が同じ)が追加され4つの表になる可能性があります。
その為、現在はjqueryで模索しておりますが、javaScriptでも実現可能であればご教授頂きたく願います。
該当のソースコード
コメントを<!-- -->にて入れていますが、動作しない場合は外してください。
■javascript (jquery)
<!--読み込み時タブ表示--> $(window).on('load',function(){ chgDisp(2); }); <!--タブ切替--> function chgDisp(value) { if(value == 1){ TAB_1.style.display ='none'; TAB_2.style.display ='block'; AREA_1.style.display = 'none'; AREA_2.style.display = 'block'; } else { TAB_1.style.display ='block'; TAB_2.style.display ='none'; AREA_1.style.display = 'block'; AREA_2.style.display = 'none'; } }; <!--ラジオボタンクリア処理--> $(function(){ $("input[name='rb']").click( function(){ var str; str = $("input:radio[name='rb']:checked").val(); $("input[name='rb']").prop("checked",false); $("input[name='rb']").val(["str"]); }); });
■html
<!--Aアラート一覧選択時のTAB表示--> <DIV id ="TAB_1"> <TABLE width="241" cellpading="0"> <TR> <TD width="120" bgcolor="#c0c0c0" align="center" style="border-bottom:hidden" rowspan="2"><B>Aアラート一覧</B></TD> <TD widh="1"> </TD> <TD> </TD> </TR> <TR hight ="24"> <TD widh="2"> </TD> <TD width="120" bgcolor="#696969" style="border-bottom:hidden" align="center" onclick="chgDisp(1);"><B>Bアラート一覧</B></TD> <TD> </TD> </TR> </TABLE> </DIV> <!--Bアラート一覧選択時のTAB表示--> <DIV id ="TAB_2"> <TABLE width="241" cellpading="0"> <TR> <TD> </TD> <TD widh="2"> </TD> <TD width="120" bgcolor="#c0c0c0" align="center" style="border-bottom:hidden" rowspan="2"><B>Bアラート一覧</B></TD> </TR> <TR hight ="24"> <TD width="120" bgcolor="#696969" style="border-bottom:hidden" align="center" onclick="chgDisp(2);"><B>Aアラート一覧</B></TD> <TD widh="1"> </TD> <TD> </TD> </TR> </TABLE> </DIV> <!--Aアラート一覧表--> <DIV id = "AREA_1"> <TABLE> <TR> <input type ="radio" name ="rb" value="Aアラート1">Aアラート1<br> </TR> <TR> <input type ="radio" name ="rb" value="Aアラート2">Aアラート2<br> </TR> <TR> <input type ="radio" name ="rb" value="Aアラート3">Aアラート3<br> </TR> </TABLE> </DIV> <!--Bアラート一覧表--> <DIV id = "AREA_2"> <TABLE> <TR> <input type ="radio" name ="rb" value="Bアラート1">Bアラート1<br> </TR> <TR> <input type ="radio" name ="rb" value="Bアラート2">Bアラート2<br> </TR> <TR> <input type ="radio" name ="rb" value="Bアラート3">Bアラート3<br> </TR> </TABLE> </DIV> <!--Cアラート一覧表--> <TABLE> <TR> <input type ="radio" name ="rb" value="Cアラート1">Cアラート1<br> </TR> <TR> <input type ="radio" name ="rb" value="Cアラート2">Cアラート2<br> </TR> <TR> <input type ="radio" name ="rb" value="Cアラート3">Cアラート3<br> </TR> </TABLE>
補足情報(FW/ツールのバージョンなど)
■環境
家のテスト環境として「jsdo.it」を利用しています。
jqueryバージョンは「jQueryv2.1.0」みたいです。
回答2件
あなたの回答
tips
プレビュー