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

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

ただいまの
回答率

90.52%

  • JavaScript

    16365questions

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

  • jQuery

    6683questions

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

  • ラジオボタン

    23questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 545

Amaki_Siro

score 2

 前提・実現したいこと

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

■前提
現在現場にて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」みたいです。

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2018/04/22 18:27

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

    キャンセル

  • Amaki_Siro

    2018/04/22 18:45

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

    キャンセル

回答 1

checkベストアンサー

+2

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

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

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


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/22 21:05 編集

    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にしたときに重複していましますか?

    キャンセル

  • 2018/04/24 01:11

    > <form>タグで分けない限り、基本ラジオボタンのnameが同じであれば一つしか選択できないという事であっていますでしょうか?
    そうですね。

    > コンパイルしてhtmlにしたときに重複していましますか?
    JSPはよくわかりませんが、出力されてブラウザに渡っているHTML(ブラウザで「ページのソースを表示」)の段階で重複しないように作りましょう。

    キャンセル

  • 2018/05/01 02:00

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

    キャンセル

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

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16365questions

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

  • jQuery

    6683questions

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

  • ラジオボタン

    23questions

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