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

Question

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

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

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

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>

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

Comments

[maisumakun]

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

[退会済みユーザー]

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

Answer 1

こんにちは。

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

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

Comments

[退会済みユーザー]

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

そうですよね、設定。

なにやら[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>

[jun68ykt]

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

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

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

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

[退会済みユーザー]

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

先日のセレクトボタンは

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

という機能でした。

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

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

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

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

[jun68ykt]

@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 をお祈りしております。