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

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

ただいまの
回答率

90.51%

  • PHP

    20337questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    16412questions

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

jsでラジオボタンの内容を取得する方法について

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 340
退会済みユーザー

退会済みユーザー

<div id="response"></div>
の部分に、「ラジオボタンの選択項目を即座に表示」したい。

と、思っているのですが、なぜか「X」だけの表示になってしまいます。

下記のコードのうち、HTMLの部分は変えずに、jsの変更だけでそのようなことはできませんでしょうか?

https://jsfiddle.net/2po6azjq/

<div class="fields" data-required="yes" data-type="radio">

<label class="radio-inline">
<input name="nanashi" class="a" value="X" checked="checked" type="radio">中身X</label>

<label class="radio-inline">
<input name="nanashi" class="a" value="Y" type="radio">中身Y</label>

<label class="radio-inline">
<input name="nanashi" class="a" value="Z" type="radio">中身Z</label>

</div>


<p>▼ここに選択内容を表示させたい</p>
<div id="response"></div>
<p>▲ここに選択内容を表示させたい</p>


<script type="text/javascript">
var input = document.getElementsByClassName("a")[0];
var response = document.getElementById('response');

var changeResponse = function() {
  response.textContent = input.value; 
};

input.addEventListener('change', changeResponse);

window.onload = changeResponse;

</script>


年始早々申し訳ございませんが、お手すきの折りに、宜しくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • maisumakun

    2018/01/01 20:15

    input radioのvalueを書き換えてしまうのがいちばん早いのですが、それでは無理な事情があるのでしょうか。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2018/01/01 20:23

    あ、すみませんでした!Valueは変更できます!ちなみに他のところは変更が難しいのですけれど、その理由は「このHTMLはwordpressのプラグインを使って出力しているものだから」です。(そしてValueだけはそのプラグインから変更できるようです。)

    キャンセル

回答 1

checkベストアンサー

0

こんにちは。

今回は、要件を満たすそのものズバリのコードは示しませんが、
ヒントを言うと、ご提示のコードでは、「中身Y」 と「中身Z」 の
ラジオボタンにイベントリスナを設定していませんよね?
イベントリスナを設定していなければ、クリックしても何も
起きないです。

上記の点に留意しつつ、 「radioボタンの状態 JavaScript」で ググって出てくる情報をたよりに
コードを書いていけばよいと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/01/01 21:14

    いま友人と「またあの人が書いてくれたらうけるよね」って話してました。笑
    でもそれよりも、やる気のでるご回答を、誠にありがとうございます!

    そうですよね、設定。

    なにやら[0]を[1]にしたら「Xだけ表示」ではなく「Yだけ表示」になったので、ここにカギがありそうだな、、と思っていました。[0,1,2]とか書いてみたのですが全然ダメでした。笑

    ひとまず今夜じっくりと取り組んでみます。


    このように↓「選択したラジオボタンが何か取得する」というわけですね。

    <script type="text/javascript">
    function getRadioValue(name){
    //ラジオボタンオブジェクトを取得する
    var radios = document.getElementsByName(nanashi);

    //取得したラジオボタンオブジェクトから選択されたものを探し出す
    var result;
    for(var i=0; i<radios.length; i++){
    if (radios[i].checked) {
    //選択されたラジオボタンのvalue値を取得する
    result = radios[i].value;
    break;
    }
    }

    //たぶんここまでは合っていて、あとは選択されたボタンを表示するために以下を書く感じですよね。

    var response = document.getElementById('response');

    var changeResponse = function() {
    response.textContent = input.value;
    };

    input.addEventListener('change', changeResponse);

    window.onload = changeResponse;

    </script>

    キャンセル

  • 2018/01/01 21:26

    正月早々、ウケてもらって何よりです(笑)

    > このように↓「選択したラジオボタンが何か取得する」というわけですね。
    と、
    > たぶんここまでは合っていて、あとは選択されたボタンを表示するために以下を書く感じですよね。

    は間違ってない方針ですので、その考えでやってみて、
    また行き詰まったらここで、新たな質問として
    投稿されるとよいでしょう。

    ちなみに、できたところまでを jsfiddle に上げるのは
    とてもよい習慣だと思います。頑張ってください。

    キャンセル

  • 2018/01/03 18:00

    こんにちは。なんとかなりました!
    https://jsfiddle.net/6nh33m8s/

    先日のセレクトボタンは

    「選んだらその項目が表示される」

    という機能でした。

    一方で今回のラジオボタンは

    「いちいち『中身X が選択されています。』と言う風に表示内容を書かないといけない」

    という機能なのがちょっと大変ですけれど。
    (でもまぁ、いちいち書き換えられるというのはメリットでもありますね。)

    ご指導ありがとうございました!ご報告まで♪

    キャンセル

  • 2018/01/03 22:23 編集

    @matsuzakaq

    > こんにちは。なんとかなりました!

    がんばりましたね。jsfiddle のコードも拝見しました。
    目的の動作がよく実現できていると思います。

    が。

    やはり、いろいろ言いたくなるところがあり、
    「私ならこうリファクタする」
    というものを作りました。

    以下です。

    https://jsfiddle.net/jun68ykt/9kpsjcod/5/

    (※ただし、これがベストというわけではありません。短時間でバーっと直したものなので、
    もっと JS に長けた人なら別の書き方をするかもしれないです。)

    https://jsfiddle.net/6nh33m8s/
    からの修正点は以下です。

    (1) JSFiddleで JSを書くときは、左下の JS を書く部分に書くと自動的に
    window.onload=function(){ ・・・ } の中にまとめてくれる。

    (2) 上記 (1) を使って、元のコードで

    $(document).ready(function () {
    UpdateState();
    })

    $(document).ready(function () {
    $("input[name='nanashi']").click(function () {
    UpdateState();
    })
    })

    となっている部分は、まとまって

    $(document).ready(function () {

    $("input[name='nanashi']").click(function () {
    UpdateState();
    });

     UpdateState();
    });

    となる。

    (3) さらに function UpdateState() の定義も$(document).readyの中に移動

    (4) UpdateState だと new でオブジェクトを作るコンストラクタ関数のように見えるので
     最初を小文字にして、updateState にする。

    (5) function updateState() {} と書いてあるのを、 var updateState = function() { } にする。

     👉 どちらの書き方が正しいということではなく、
     初心者のうちはできるだけ、var updateState = function() { } の書き方のほうに慣れて、
      JavaScript の関数が「第一級オブジェクト」(←初めて聞くのであればググってください)であり、
      変数に入れたり、他の関数の戻り値にできたりすることを意識してほしい。

    (6) switch 文で、case "item" , case "item2", case "item3" としている判断を
     正規表現を使って以下の一行にする。

     if (/^item[1-3]$/.test(checkedInput.val())) {

     👉 正規表現にマッチしない場合がわかるように、「不明」のラジオボタンを追加

    (7) 「・・・が選択されています」の・・・の部分を、該当label から取得

      👉そのために、label タグに for 属性、 input に id 属性を追加

    最後に

    https://teratail.com/questions/107310 で、kei344さんに
    「ここ数日の一連の質問を見るに、HTMLの入門書とJavaScriptの入門書をいくつか買って、
    一通り勉強されてはいかがでしょうか。」

    とありがたいお叱りを受けているけれども、 JS の基本書(入門ではない)としては、
    一昔前は、サイ本

    JavaScript 第6版 大型本 – 2012/8/10
    https://www.amazon.co.jp/dp/4873115736/

    が定番だったのだけれど、今 なら 以下をオススメします。

    徹底マスター JavaScriptの教科書 プログラミングの教養から、言語仕様、開発技法までが正しく身につく
    https://www.amazon.co.jp/dp/4797388641/

    上記を読んだ上で、「開眼!JavaScript」https://www.amazon.co.jp/dp/487311621X
    で整理すれば、 コア JavaScript の理解は十分だと思うので、その次は Node でも React でも
    いけますよ(たぶん)。基礎が大事、基礎が。

    「開眼!JavaScript」を読むときはサンプルコードの jsfiddle URL を
    以下に小生が一覧にしているのでご参考まで。

    https://qiita.com/jun68ykt/items/5aee04682f95f2354398


    以上です。
    それでは happy hacking をお祈りしております。

    キャンセル

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

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

関連した質問

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

  • PHP

    20337questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    16412questions

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