質問編集履歴

2 誤記修正。 各アラートのIDは異なります。

Amaki_Siro

Amaki_Siro score 8

2018/04/22 19:06  投稿

ラジオボタンの制御方法について教えてください
### 前提・実現したいこと
久々の投稿で質問の仕方が誤っていたら申し訳ございません。
■前提
現在現場にてWebアプリを作成しています。
HTML系経験の1~2か月しかなく、全くの初心者です。
■実現したい事
WebアプリのページをJSPにて作成しています。
iteratorを利用した一覧表が三つ存在します。
その三つの表にはそれぞれラジオボタンが存在します。
A表のラジオボタンを選択した場合には、
B表またはC表で選択していたラジオボタンがクリアされるような処理を作成しています。
■補足
影響があるか分かりませんが補足となります。
実際の表では以下の2点が追加内容として存在します。
・iteratorを利用して表示している表ですが、初期表示は20件まで表示し、
リンク「次」を押下すると21~40件目が表示されます。
・C表はタブ切替によって裏にある表となります。(javascript利用でページ遷移はなし)
### 発生している問題・エラーメッセージ
■問題
取得したラジオボタン要素?を再設定することが出来ない。
javascriptでもidやformを利用して、値をべた書き判定していけば一応できましたが、
滅茶苦茶長く汎用性皆無のものとなってしまいました。
因みに時期案件では同一の表(ラジオボタンや表構成が同じ)が追加され4つの表になる可能性があります。
その為、現在はjqueryで模索しておりますが、javaScriptでも実現可能であればご教授頂きたく願います。
### 該当のソースコード
■javascript (jquery)
```
$(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
```
<DIV id = "AREA_1">
   <input type ="radio" name ="rb" value="Aアラート1" id="rb">Aアラート1<br>
   <input type ="radio" name ="rb" value="Aアラート2" id="rb">Aアラート2<br>
   <input type ="radio" name ="rb" value="Aアラート3" id="rb">Aアラート3<br>
   <input type ="radio" name ="rb" value="Aアラート1" id="rbA">Aアラート1<br>
   <input type ="radio" name ="rb" value="Aアラート2" id="rbA">Aアラート2<br>
   <input type ="radio" name ="rb" value="Aアラート3" id="rbA">Aアラート3<br>
</DIV>
<DIV id = "AREA_2">
   <input type ="radio" name ="rb" value="Bアラート1" id="rb">Bアラート1<br>
   <input type ="radio" name ="rb" value="Bアラート2" id="rb">Bアラート2<br>
   <input type ="radio" name ="rb" value="Bアラート3" id="rb">Bアラート3<br>
   <input type ="radio" name ="rb" value="Bアラート1" id="rbB">Bアラート1<br>
   <input type ="radio" name ="rb" value="Bアラート2" id="rbB">Bアラート2<br>
   <input type ="radio" name ="rb" value="Bアラート3" id="rbB">Bアラート3<br>
</DIV>
<DIV id = "AREA_3">
   <input type ="radio" name ="rb" value="Cアラート1" id="rb">Cアラート1<br>
   <input type ="radio" name ="rb" value="Cアラート2" id="rb">Cアラート2<br>
   <input type ="radio" name ="rb" value="Cアラート3" id="rb">Cアラート3<br>
   <input type ="radio" name ="rb" value="Cアラート1" id="rbC">Cアラート1<br>
   <input type ="radio" name ="rb" value="Cアラート2" id="rbC">Cアラート2<br>
   <input type ="radio" name ="rb" value="Cアラート3" id="rbC">Cアラート3<br>
</DIV>
```
### 試したこと
■試した事、考えた事
1.一旦現在選択ラジオボタンを退避させる。
2.ラジオボタンを全てクリア(チェックを外す)する。
3.退避させたラジオボタンを再設定する。
### 補足情報(FW/ツールのバージョンなど)
■環境
家のテスト環境として「jsdo.it」を利用しています。
jqueryバージョンは「jQueryv2.1.0」みたいです。
ここにより詳細な情報を記載してください。
  • JavaScript

    25625 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    9993 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • ラジオボタン

    52 questions

    ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

1 コードブロックの付与

Amaki_Siro

Amaki_Siro score 8

2018/04/22 18:44  投稿

ラジオボタンの制御方法について教えてください
### 前提・実現したいこと
久々の投稿で質問の仕方が誤っていたら申し訳ございません。
■前提
現在現場にてWebアプリを作成しています。
HTML系経験の1~2か月しかなく、全くの初心者です。
■実現したい事
WebアプリのページをJSPにて作成しています。
iteratorを利用した一覧表が三つ存在します。
その三つの表にはそれぞれラジオボタンが存在します。
A表のラジオボタンを選択した場合には、
B表またはC表で選択していたラジオボタンがクリアされるような処理を作成しています。
■補足
影響があるか分かりませんが補足となります。
実際の表では以下の2点が追加内容として存在します。
・iteratorを利用して表示している表ですが、初期表示は20件まで表示し、
リンク「次」を押下すると21~40件目が表示されます。
・C表はタブ切替によって裏にある表となります。(javascript利用でページ遷移はなし)
### 発生している問題・エラーメッセージ
■問題
取得したラジオボタン要素?を再設定することが出来ない。
javascriptでもidやformを利用して、値をべた書き判定していけば一応できましたが、
滅茶苦茶長く汎用性皆無のものとなってしまいました。
因みに時期案件では同一の表(ラジオボタンや表構成が同じ)が追加され4つの表になる可能性があります。
その為、現在はjqueryで模索しておりますが、javaScriptでも実現可能であればご教授頂きたく願います。
### 該当のソースコード
■javascript (jquery)
```
$(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
```
<DIV id = "AREA_1">
   <input type ="radio" name ="rb" value="Aアラート1" id="rb">Aアラート1<br>
   <input type ="radio" name ="rb" value="Aアラート2" id="rb">Aアラート2<br>
   <input type ="radio" name ="rb" value="Aアラート3" id="rb">Aアラート3<br>
</DIV>
<DIV id = "AREA_2">
   <input type ="radio" name ="rb" value="Bアラート1" id="rb">Bアラート1<br>
   <input type ="radio" name ="rb" value="Bアラート2" id="rb">Bアラート2<br>
   <input type ="radio" name ="rb" value="Bアラート3" id="rb">Bアラート3<br>
</DIV>
<DIV id = "AREA_3">
   <input type ="radio" name ="rb" value="Cアラート1" id="rb">Cアラート1<br>
   <input type ="radio" name ="rb" value="Cアラート2" id="rb">Cアラート2<br>
   <input type ="radio" name ="rb" value="Cアラート3" id="rb">Cアラート3<br>
</DIV>
```
### 試したこと
■試した事、考えた事
1.一旦現在選択ラジオボタンを退避させる。
2.ラジオボタンを全てクリア(チェックを外す)する。
3.退避させたラジオボタンを再設定する。
### 補足情報(FW/ツールのバージョンなど)
■環境
家のテスト環境として「jsdo.it」を利用しています。
jqueryバージョンは「jQueryv2.1.0」みたいです。
ここにより詳細な情報を記載してください。
  • JavaScript

    25625 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    9993 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • ラジオボタン

    52 questions

    ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る