質問編集履歴

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

Amaki_Siro score 8

2018/04/22 19:06  投稿

ラジオボタンの制御方法について教えてください

### 前提・実現したいこと

久々の投稿で質問の仕方が誤っていたら申し訳ございません。

■前提

現在現場にてWebアプリを作成しています。

HTML系経験の１~２か月しかなく、全くの初心者です。

■実現したい事

WebアプリのページをJSPにて作成しています。

iteratorを利用した一覧表が三つ存在します。

その三つの表にはそれぞれラジオボタンが存在します。

A表のラジオボタンを選択した場合には、

B表またはC表で選択していたラジオボタンがクリアされるような処理を作成しています。

■補足

影響があるか分かりませんが補足となります。

実際の表では以下の２点が追加内容として存在します。

・iteratorを利用して表示している表ですが、初期表示は20件まで表示し、

リンク「次」を押下すると21～40件目が表示されます。

・C表はタブ切替によって裏にある表となります。（javascript利用でページ遷移はなし）

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

■問題

取得したラジオボタン要素？を再設定することが出来ない。

javascriptでもidやformを利用して、値をべた書き判定していけば一応できましたが、

滅茶苦茶長く汎用性皆無のものとなってしまいました。

因みに時期案件では同一の表(ラジオボタンや表構成が同じ)が追加され４つの表になる可能性があります。

その為、現在は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アラート１" id="rb">Aアラート１<br>

<input type ="radio" name ="rb" value="Aアラート２" id="rb">Aアラート２<br>

<input type ="radio" name ="rb" value="Aアラート３" id="rb">Aアラート３<br>

<input type ="radio" name ="rb" value="Aアラート１" id="rbA">Aアラート１<br>

<input type ="radio" name ="rb" value="Aアラート２" id="rbA">Aアラート２<br>

<input type ="radio" name ="rb" value="Aアラート３" id="rbA">Aアラート３<br>

</DIV>

<DIV id = "AREA_2">

<input type ="radio" name ="rb" value="Bアラート１" id="rb">Bアラート１<br>

<input type ="radio" name ="rb" value="Bアラート２" id="rb">Bアラート２<br>

<input type ="radio" name ="rb" value="Bアラート３" id="rb">Bアラート３<br>

<input type ="radio" name ="rb" value="Bアラート１" id="rbB">Bアラート１<br>

<input type ="radio" name ="rb" value="Bアラート２" id="rbB">Bアラート２<br>

<input type ="radio" name ="rb" value="Bアラート３" id="rbB">Bアラート３<br>

</DIV>

<DIV id = "AREA_3">

<input type ="radio" name ="rb" value="Cアラート１" id="rb">Cアラート１<br>

<input type ="radio" name ="rb" value="Cアラート２" id="rb">Cアラート２<br>

<input type ="radio" name ="rb" value="Cアラート３" id="rb">Cアラート３<br>

<input type ="radio" name ="rb" value="Cアラート１" id="rbC">Cアラート１<br>

<input type ="radio" name ="rb" value="Cアラート２" id="rbC">Cアラート２<br>

<input type ="radio" name ="rb" value="Cアラート３" id="rbC">Cアラート３<br>

</DIV>

```

### 試したこと

■試した事、考えた事

１．一旦現在選択ラジオボタンを退避させる。

２．ラジオボタンを全てクリア（チェックを外す）する。

３．退避させたラジオボタンを再設定する。

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

■環境

家のテスト環境として「jsdo.it」を利用しています。

jqueryバージョンは「jQueryv2.1.0」みたいです。

ここにより詳細な情報を記載してください。

JavaScript 25625 questions JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。 Myタグに追加 jQuery 9993 questions jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。 Myタグに追加 ラジオボタン 52 questions ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。 Myタグに追加

1 コードブロックの付与

Amaki_Siro score 8

2018/04/22 18:44  投稿

ラジオボタンの制御方法について教えてください

### 前提・実現したいこと

久々の投稿で質問の仕方が誤っていたら申し訳ございません。

■前提

現在現場にてWebアプリを作成しています。

HTML系経験の１~２か月しかなく、全くの初心者です。

■実現したい事

WebアプリのページをJSPにて作成しています。

iteratorを利用した一覧表が三つ存在します。

その三つの表にはそれぞれラジオボタンが存在します。

A表のラジオボタンを選択した場合には、

B表またはC表で選択していたラジオボタンがクリアされるような処理を作成しています。

■補足

影響があるか分かりませんが補足となります。

実際の表では以下の２点が追加内容として存在します。

・iteratorを利用して表示している表ですが、初期表示は20件まで表示し、

リンク「次」を押下すると21～40件目が表示されます。

・C表はタブ切替によって裏にある表となります。（javascript利用でページ遷移はなし）

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

■問題

取得したラジオボタン要素？を再設定することが出来ない。

javascriptでもidやformを利用して、値をべた書き判定していけば一応できましたが、

滅茶苦茶長く汎用性皆無のものとなってしまいました。

因みに時期案件では同一の表(ラジオボタンや表構成が同じ)が追加され４つの表になる可能性があります。

その為、現在は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アラート１" id="rb">Aアラート１<br>

<input type ="radio" name ="rb" value="Aアラート２" id="rb">Aアラート２<br>

<input type ="radio" name ="rb" value="Aアラート３" id="rb">Aアラート３<br>

</DIV>

<DIV id = "AREA_2">

<input type ="radio" name ="rb" value="Bアラート１" id="rb">Bアラート１<br>

<input type ="radio" name ="rb" value="Bアラート２" id="rb">Bアラート２<br>

<input type ="radio" name ="rb" value="Bアラート３" id="rb">Bアラート３<br>

</DIV>

<DIV id = "AREA_3">

<input type ="radio" name ="rb" value="Cアラート１" id="rb">Cアラート１<br>

<input type ="radio" name ="rb" value="Cアラート２" id="rb">Cアラート２<br>

<input type ="radio" name ="rb" value="Cアラート３" id="rb">Cアラート３<br>

</DIV>

```

### 試したこと

■試した事、考えた事

１．一旦現在選択ラジオボタンを退避させる。

２．ラジオボタンを全てクリア（チェックを外す）する。

３．退避させたラジオボタンを再設定する。

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

■環境

家のテスト環境として「jsdo.it」を利用しています。

jqueryバージョンは「jQueryv2.1.0」みたいです。

ここにより詳細な情報を記載してください。

JavaScript 25625 questions JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。 Myタグに追加 jQuery 9993 questions jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。 Myタグに追加 ラジオボタン 52 questions ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。 Myタグに追加