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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

jQuery

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

Q&A

解決済

3回答

1849閲覧

ラジオボタンの選択肢により.show() .hide()させる方法

pegy

総合スコア243

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/04/19 15:21

以下のコードのように、changeでvalue="yes"を選択した場合には、#moneyRangeをshow()にして、value="no"を選択した場合には、hide()
にしたいのですが、一旦showになった#moneyRangeについてラジオボタンの選択をvalue="no"に変えても、表示が隠れてくれません。
コードのどの点に原因があるのでしょうか?
よろしくお願い申し上げます。

HTML

1 <p> 2 <input id="spec" type="radio" name="moneyChoice" value="yes">選択する 3 <br> 4 <input id="spec" type="radio" name="moneyChoice" value="no">選択しない 5 </p> 6 7 <div id="moneyRange"> 8......... 9 </div>

javascript

1$(function(){ 2 $('#moneyRange').hide(); 3 $('#spec').on('change',function(){ 4 var choice =$('#spec').val(); 5 if (choice=='yes') { 6 $('#moneyRange').show(); 7 }else{ 8 $('#moneyRange').hide(); 9} 10 }) 11})

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

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

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

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

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

guest

回答3

0

JavaScript

1jQuery(function(jQuery) { 2 jQuery('#moneyRange').hide(); 3 jQuery('.spec').on('change', function(event) { 4 event.target.value === 'yes' ? jQuery('#moneyRange').show() : jQuery('#moneyRange').hide(); 5 }); 6});

Re: pegy さん

投稿2017/04/19 15:48

think49

総合スコア18156

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

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

pegy

2017/04/19 16:04

コメントありがとうございます。 eventのtarget propertyに行けば、対象となるinput要素にもたどり着けるということですね。 jQuery('.spec').on('change', function(e) { alert(e.target.value); }); でそれぞれ選択したvalueが得られることが確認できました。 これも初めて知りました。非常に興味深いです。これ自体がthisの正体なのでしょうか?それともvalを取得するための異なるアプローチなのでしょうか?
think49

2017/04/19 16:07

this === event.currentTarget であり、event.target とは厳密には等価ではありません。 ただし、input要素は子要素を持てないので、今回に限っては this と event.target は等価です。 子要素のある要素に click イベントハンドラを定義し、event.target, event.currentTarget, this をそれぞれ参照すれば違いが分かると思います。 http://uhyohyo.net/javascript/3_5.html
pegy

2017/04/19 16:13

それぞれ確かめてみました、とてもわかりやすかったです! 夜分にもかかわらず、お力添えをいただき、深謝を申し上げます。 参考サイトもこれからゆっくり拝見させていただきます。
guest

0

ベストアンサー

id="spec" が2つ設定されていますが、同じ名前のidは1ページ中に1個だけしか使えません。


追記:

JavaScript

1$( function() { 2 $( '#moneyRange' ).hide(); 3 $( 'input' ).on( 'change', function() { 4 var choice = $( this ).val(); // ここ 5 if ( choice == 'yes' ) { 6 $( '#moneyRange' ).show(); 7 } else { 8 $( '#moneyRange' ).hide(); 9 } 10 } ); 11} ); 12```**動くサンプル:**[https://jsfiddle.net/fcu34zkh/](https://jsfiddle.net/fcu34zkh/)

投稿2017/04/19 15:29

編集2017/04/19 15:39
kei344

総合スコア69364

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

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

pegy

2017/04/19 15:33

ご回答ありがとうございます。 下記のYukiHayakawa様にもコメント差し上げた通り、idではなく他のして ('[name="moneyChoice"]') やclassでもhideをしてくれませんでした、、他にコードに問題がありますでしょうか?cosoleではエラーは出ていません。 よろしくお願い申し上げます。
pegy

2017/04/19 15:44

kei344様 サンプルまでご提供頂きありがとうございます。 私のコードの場合、var choice =$('.spec').val(); としており、これでは一度choice変数にvalが格納されてしまったら、changeのたびに上書きされないのでしょうか?thisはあくまで、$('.spec')の代用だと思っていたので、なぜこのように結果が異なるのか、混乱してきました。。
kei344

2017/04/19 15:49

「$('.spec')」には複数の要素(input)が入っています。「$('.spec').val()」とすると、「.spec」のはじめの値が取得されます。 > thisはあくまで、$('.spec')の代用 違いますよ。jQueryのコールバックファンクション内では対象の要素が入っています。
pegy

2017/04/19 15:55

早速コメントありがとうございます。 なるほど、「$('.spec')は複数の要素があり、thisとした場合には、changeで選択した、.specにinput要素(おっしゃる対象の要素)の値が取得されるということですね。まだまだ、勉強不足です、、お力添え、誠にありがとうございました!
guest

0

idはユニークでなければならないため、値が取得できていないのだと思われます。

$('#spec') → $('[name="moneyChoice"]')
に変更してみたらどうでしょうか。

投稿2017/04/19 15:28

YukiHayakawa

総合スコア53

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

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

pegy

2017/04/19 15:32

ご回答ありがとうございます。 $('[name="moneyChoice"]') でもclass設定をしてもやはりhideしてくれません。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問