質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
ラジオボタン

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

JavaScript

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

jQuery

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

Q&A

解決済

1回答

4964閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

ラジオボタン

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

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2018/04/22 09:25

編集2018/04/22 10: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="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="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="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」みたいです。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/04/22 09:27

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
退会済みユーザー

退会済みユーザー

2018/04/22 09:45

。。。このような方法があったのですね;;;申し訳ございません。大変為になりました。
guest

回答1

0

ベストアンサー

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

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

name属性が同じなので、スクリプトで処理する必要が無いと思います。

動くサンプル:https://jsfiddle.net/ab4vxguz/


また、id="rbA"が複数ありますが、HTMLの文法上同一ページ内でidの重複は許可されていません。
複数の要素をまとめたければ class="rbA" のようにする必要があります。

投稿2018/04/22 10:49

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/04/22 12:08 編集

kei344さん そういうことだったんですね!丁寧な回答ありがとうございます!スクリプトを外したら正常に動作しました!  以前出来なかった時は色々と迷走しており、formタグで分けてしまっていたからみたいです。 ``` <DIV id = "AREA_1"> <form name = "form1"> <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> </form> </DIV> <DIV id = "AREA_2"> <form name = "form2"> <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> </form> </DIV> ``` 念のための確認です。<div>タグや<table>タグで分かれていまいが、strut2のiteratorを使用するしないに関わらず <form>タグで分けない限り、基本ラジオボタンのnameが同じであれば一つしか選択できないという事であっていますでしょうか? >HTMLの文法上同一ページ内でidの重複は許可されていません →本来はstrut2のiteratorを利用してDTOのリスト分表示させる予定の為、イメージしてもらいやすくするよう分けていました申し訳ございません;;;;  ....もしかしてですが、現在のJSP上はiteratorの繰返項目での設定の為、重複がないソースになっていますが、コンパイルしてhtmlにしたときに重複していましますか?
kei344

2018/04/23 16:11

> <form>タグで分けない限り、基本ラジオボタンのnameが同じであれば一つしか選択できないという事であっていますでしょうか? そうですね。 > コンパイルしてhtmlにしたときに重複していましますか? JSPはよくわかりませんが、出力されてブラウザに渡っているHTML(ブラウザで「ページのソースを表示」)の段階で重複しないように作りましょう。
退会済みユーザー

退会済みユーザー

2018/04/30 17:00

PCがネットワークに繋がらないという謎の現象が起きて回答が遅れました。 申し訳ございません。(いまだに直らずネカフェから返信してます...)   丁寧なご回答ありがとうございます! 大変助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問