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

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

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

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

jQuery

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

Q&A

解決済

1回答

3341閲覧

タブの切り替え直後の疑似ラジオボタンの値の取得方法

nyamo

総合スコア21

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2016/05/21 04:50

編集2016/05/21 09:37

###前提・実現したいこと
タブ1に3つ、タブ2に3つの疑似ラジオボタンを設置しています。
jqueryで1つずつ値を取ろうとしているのですが、どうにも上手くいきません。

radio1にチェックがあれば、タブ1のliをクリックしたら<input type="text" data-main="radio1">に表示。radio2にチェックがあれば、タブ1のliをクリックしたら<input type="text" data-main="radio2">に表示。

ここまでは問題なく動作しているのですが、タブ1のラジオボタンをradio2にチェックしたまま、タブ2に切り替えた時に、タブ2のラジオボタンのradio1にチェックがついていても、liをクリックしたら<input type="text" data-main="radio1">に表示されず、<input type="text" data-main="radio2">に表示されてしまいます。

もう一度、タブ2でチェックのついているradio1をクリックすれば<input type="text" data-main="radio1">に表示されるのですが、切り替えた直後のチェックの値が取れていないようです。

タブ1についてもページ表示直後はradio1にチェックがあっても値がとれませんでしたが、なんとか.triggerHandler('click');で取得する事ができました。タブ切り替え直後もtriggerでとれるのか?とやってみましたが、eq(0)などを使ってもうまい具合に動作しませんでした。

タブを切り替えた直後の値の取り方をわかる方がいらっしゃいましたらお教え頂けると幸いです。
よろしくお願い致します。

###該当のソースコード
--こちらはタブ1のラジオボタン部分のjqueryです。タブ2もほぼ同じです。
val()の中は省略しています。$hogehogeにはvarでli部分、$hogeにはinputを入れています。

var $hoge = $("input[data-main='radio1']"); var $hoge2 = $("input[data-main='radio2']"); var $hoge3 = $("input[data-main='radio3']"); var radiocheck = ""; $(".radio").on("click", function(e) { radiocheck = $(this).data("b"); }).triggerHandler('click'); $hogehoge.on("click", function(e) { if(radiocheck == "radio1"){ $hoge.val(); } else if(radiocheck == "radio2") { $hoge2.val(); } else if(radiocheck == "radio3") { $hoge3.val(); } }); --タブセット <div class="tabs"> <button type="button" class="tab active" data-a="tab1">tab1</button> <button type="button" class="tab" data-a="tab2">tab2</button> </div> --タブ1 <div class="tab1_radio checked"> <span class="radio checked" data-b="radio1">radio1</span> <span class="radio" data-b="radio2">radio2</span> <span class="radio" data-b="radio3">radio3</span> </div> <ul> <li>テスト</li> <li>テスト2</li> </ul> --タブ2 <div class="tab2_radio"> <span class="radio checked" data-b="radio1">radio1</span> <span class="radio" data-b="radio2">radio2</span> <span class="radio" data-b="radio3">radio3</span> </div> <ul> <li>テスト3</li> <li>テスト4</li> </ul> ---表示箇所 <input type="text" data-main="radio1"> <input type="text" data-main="radio2"> <input type="text" data-main="radio3">

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

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

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

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

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

kei344

2016/05/21 04:59

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

2016/05/21 05:26

radiocheck と $hoge を指定している箇所がありませんが、そこも追記願えませんか?
nyamo

2016/05/21 09:28

radiocheck と $hogeの変数を追加いたしました。
kei344

2016/05/21 09:32

何度もすいませんが、「input[data-target='title']」にあたるものが書かれていません。「<input type="text" data-main="radio1">」のことでしょうか?
nyamo

2016/05/21 09:36

はい。修正して記載しました。
kei344

2016/05/21 11:03 編集

buttonのコード部分の問題だと思うのですが、そこを記述されていませんね。
guest

回答1

0

ベストアンサー

radiocheck の書き換え部分が問題だと思うのですが、全体のコードがわからないため、すみませんがそこについては指摘できません。

私ならたぶん、変数に状態を入れて書き換えるより、.active を頼りに状態を把握し、現在のタブ選択状況を更新するように書きます。

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

JavaScript

1$( '.tabbutton' ).on( 'click', function() { 2 var $_ = $( this ), target = $_.data( 'a' ), $t; 3 // ボタンのラジオ処理 4 $( '.tabbutton' ).removeClass( 'active' ); 5 $_.addClass( 'active' ); 6 // タブのラジオ処理 7 $t = $( '.tab' ).removeClass( 'active' ).filter( '#' + target ).addClass( 'active' ); 8 // 値の代入 9 $( '#tab' ).val( target ); 10 $( '#radio' ).val( $t.find( '.active' ).data( 'b' ) ); 11} ); 12$( '.radio' ).on( 'click', function() { 13 var $_ = $( this ), $parent = $_.parent(), $mytab = $_.parents( '.tab' ); 14 // タブラジオのラジオ処理 15 $parent.find( '.radio' ).removeClass( 'active' ); 16 $_.addClass( 'active' ); 17 // タブがアクティブな場合のみ処理 18 if ( $mytab.hasClass( 'active' ) ) { 19 // 値の代入 20 $( '#radio' ).val( $_.data( 'b' ) ); 21 } 22} ); 23// 初期値を入れる 24$( '#tab' ).val( $( '.tab.active' ).attr( 'id' ) ); 25$( '#radio' ).val( $( '.tab.active .active' ).data( 'b' ) );

HTML

1<div class="tabset"> 2 <div class="tabs"> 3 <button type="button" class="tabbutton active" data-a="tab1">tab1</button> 4 <button type="button" class="tabbutton" data-a="tab2">tab2</button> 5 </div> 6 <div id="tab1" class="tab active"> 7 <div class="tab_radio"> 8 <span class="radio active" data-b="radio1">radio1</span> 9 <span class="radio" data-b="radio2">radio2</span> 10 <span class="radio" data-b="radio3">radio3</span> 11 </div> 12 <ul> 13 <li>テスト</li> 14 <li>テスト2</li> 15 </ul> 16 </div> 17 <div id="tab2" class="tab"> 18 <div class="tab_radio"> 19 <span class="radio active" data-b="radio1">radio1</span> 20 <span class="radio" data-b="radio2">radio2</span> 21 <span class="radio" data-b="radio3">radio3</span> 22 </div> 23 <ul> 24 <li>テスト3</li> 25 <li>テスト4</li> 26 </ul> 27 </div> 28</div> 29<input type="text" id="tab"> 30<input type="text" id="radio">

投稿2016/05/21 11:05

kei344

総合スコア69364

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

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

nyamo

2016/05/21 15:30

ご回答ありがとうございます。 こちらの回答のように、activeを使うことで問題なく動きそうですが、今回は変数を増やしてラジオボタンの値をそれぞれ個別に取得する方法で解決いたしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問