jQueryを使用してクリックしたラジオボタンの行番号を取得する方法

このQ&Aのポイント
  • jQueryを使用してクリックしたラジオボタンの行番号を取得する方法について教えてください。
  • 提供されたHTMLのテーブル内のラジオボタンから行番号を取得する方法がわかりません。
  • 現在のコードでは、ラジオボタンの値を取得することはできますが、行番号が取得できません。どのようにすれば行番号を取得できるでしょうか?
回答を見る
  • ベストアンサー

クリックしたラジオボタンの行番号を取得したい

Jqueryを用いてクリックしたラジオボタンの行番号を取得したいのですが、 うまくいきません。 次のようなHTMLで <table border="1" style="font-size:12px;"> <tr> <td>2014年06月01日</td> <td> <label><input type="radio" name="rd1" class="rd" value="0" />A</label> <label><input type="radio" name="rd1" class="rd" value="1" checked="checked" />B</label> <label><input type="radio" name="rd1" class="rd" value="7" />C</label> </td> </tr> <tr> <td>2014年06月02日</td> <td> <label><input type="radio" name="rd2" class="rd" value="0" />A</label> <label><input type="radio" name="rd2" class="rd" value="1" checked="checked" />B</label> <label><input type="radio" name="rd2" class="rd" value="7" />C</label> </td> </tr> <tr> <td>2014年06月03日</td> <td> <label><input type="radio" name="rd3" class="rd" value="0" />A</label> <label><input type="radio" name="rd3" class="rd" value="1" checked="checked" />B</label> <label><input type="radio" name="rd3" class="rd" value="7" />C</label> </td> </tr> <tr> <td>2014年06月04日<td> <td> <label><input type="radio" name="rd4" class="rd" value="0" />A</label> <label><input type="radio" name="rd4" class="rd" value="1" checked="checked" />B</label> <label><input type="radio" name="rd4" class="rd" value="7" />C</label> </td> </tr> </table> 下記で選択したラジオボタンの値を取得できるのですが、 行の番号が取れません。 //ラジオボタンを変更 $('.rd').change(function(){ val = $(this).val(); alert("hoge " + val); }); どのようにしたら良いでしょうか? 宜しくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

"行番号"ってどこのこと言ってるの? <tr>が1行ってこと? $('.rd').change(function(){ var line = $(this).parents('tr').index(); });

関連するQ&A

  • jQueryで複数のラジオボタンを処理

    jQueryを最近使い始めました。 以下のようなことをしたいのですが、いいやり方が分かりません。 jQueryを使ってページの読み込み後すぐに、ラジオボタンにチェックを入れたいと思っています。 以下のようにすると実際にチェックが入りました。 HTML <input type="radio" name="a" value="1" /> <input type="radio" name="a" value="2" /> jQuery if(!$("input:radio[name=a]:checked").val()){  $("input:radio[name=a]:first").attr("checked" , "checked"); } ラジオボタンが複数ある場合、上記のjQueryのnameの値を変えたものを増やしていけば対応できたのですが、ラジオボタンがたくさんある場合、同じようなスクリプトが何行も増えてしまいます。 うまく関数にする方法やその他よい対処法はないでしょうか。 <input type="radio" name="a" value="1" /> <input type="radio" name="a" value="2" /> <input type="radio" name="b" value="1" /> <input type="radio" name="b" value="2" /> <input type="radio" name="c" value="1" /> <input type="radio" name="c" value="2" /> … if(!$("input:radio[name=a]:checked").val()){  $("input:radio[name=a]:first").attr("checked" , "checked"); } if(!$("input:radio[name=b]:checked").val()){  $("input:radio[name=b]:first").attr("checked" , "checked"); } if(!$("input:radio[name=c]:checked").val()){  $("input:radio[name=c]:first").attr("checked" , "checked"); } …

  • アンケートをCSVに落とした時の並び順

    以下のHTMLのようなアンケートフォームを作っています. CSVに落とした時の並びを変えたいのですが,どなたかお知恵を貸していただけませんでしょうか. 記事1~3,それぞれのランクA~Eを選んだ後,BestとWorstを決定するものです. 今の状態だとCSVには,「name=○」の順番でいうと↓このように並びます. 記事10-1 11Best 12Worst 記事10-2 記事10-3 11-1 11-2 12-1 12-2 これを↓このように並んでCSVに落としたいのです. 記事10-1 記事10-2 記事10-3 11Best 11-1 11-2 12Worst 12-1 12-2 <table> <tr><td colspan="3" valign="top">記事1</td></tr> <tr> <td valign="top"> <label for='1_1'>  <input type=radio name="記事10-1" value="a" id='1_1'>A</label> <label for='1_2'><input type=radio name="記事10-1" value="b" id='1_2'>B</label> <label for='1_3'><input type=radio name="記事10-1" value="c" id='1_3'>C</label> <label for='1_4'><input type=radio name="記事10-1" value="d" id='1_4'>D</label> <label for='1_5'><input type=radio name="記事10-1" value="e" id='1_5' checked>E</label> </td> <td align="center" valign="top"><input type=radio name="11Best" value="1"></td> <td align="center" valign="top"><input type=radio name="12Worst" value="1"></td> </tr> <tr><td colspan="3" valign="top">記事2</td></tr> <tr> <td valign="top"> <label for='2_1'>  <input type=radio name="記事10-2" value="a" id='1_1'>A</label> <label for='2_2'><input type=radio name="記事10-2" value="b" id='2_2'>B</label> <label for='2_3'><input type=radio name="記事10-2" value="c" id='2_3'>C</label> <label for='2_4'><input type=radio name="記事10-2" value="d" id='2_4'>D</label> <label for='2_5'><input type=radio name="記事10-2" value="e" id='2_5' checked>E</label> </td> <td align="center" valign="top"><input type=radio name="11Best" value="2"></td> <td align="center" valign="top"><input type=radio name="12Worst" value="2"></td> </tr> <tr><td colspan="3" valign="top">記事3</td></tr> <tr> <td valign="top"> <label for='3_1'>  <input type=radio name="記事10-3" value="a" id='1_1'>A</label> <label for='3_2'><input type=radio name="記事10-3" value="b" id='3_2'>B</label> <label for='3_3'><input type=radio name="記事10-3" value="c" id='3_3'>C</label> <label for='3_4'><input type=radio name="記事10-3" value="d" id='3_4'>D</label> <label for='3_5'><input type=radio name="記事10-3" value="e" id='3_5' checked>E</label> </td> <td align="center" valign="top"><input type=radio name="11Best" value="3"></td> <td align="center" valign="top"><input type=radio name="12Worst" value="3"></td> </tr> </table> <table> <tr><td valign="top">[11-1]Bestについて1</td></tr> <tr><td valign="top"><input name="11-1" type="text" value="" title="Best" size="100"></td></tr> <tr><td valign="top">[11-2]Bestについて2</td></tr> <tr> <td valign="top"> <label for='11_2a'> <input type=radio name="11-2" value="a" id='11_2a'>BestA</label> <label for='11_2b'><input type=radio name="11-2" value="b" id='11_2b'>BestB</label> </td> </tr> <tr><td valign="top">[12-1]Worstについて1</td></tr> <tr><td valign="top"><input name="12-1" type="text" value="" title="Worst" size="100"></td></tr> <tr><td valign="top">[12-2]Worstについて2</td></tr> <tr> <td valign="top"> <label for='12_2a'> <input type=radio name="12-2" value="a" id='12_2a'>WorstA</label> <label for='12_2b'><input type=radio name="12-2" value="b" id='11_2b'>WorstB</label> </td> </tr> このHTML内なのか,cgi内なのか,どこでどのように設定したらよいでしょうか. 例えば,「name="11Best"」を「name="11-0"」にすればよいとか,そのくらいで並びが変わったり・・・しませんよね. 質問もつたなくうまくお伝えできるか分かりませんが,アドバイスいただけると大変助かります. なにとぞよろしくお願いいたします.

  • ラジオボタンでの表示の切替方法

    2つのラジオボタンの切替によって、表示の切替を行いたいです。 例えば、Aを選択すると(1)の入力フォームが表示され、Bを選択すると(2)が表示したいです。初期表示はAが選択された時と同じ内容となります。 <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td><form name="Quick1"> <tr><td>選択</td> <td> <input type="radio" name="A" value="1" checked>A  <input type="radio" name="B" value="2">B  </td></tr> <tr> <td>(1)</td> <td> <input type="text" size="6" maxlength="5" name="text1" value="">- <input type="text" size="6" maxlength="5" name="text2" value="">- <input type="text" size="6" maxlength="5" name="text3" value=""> </td></tr> <tr> <td>(2)</td> <td> <input type="text" name="text7" size="43" value=""> </td></tr> </table></form></td></tr></table> すみませんが、よろしくお願い致します。

  • ラジオボタン選択で「複数ラジオボタン」をアクティブにするには?

    ■下記サンプルソースのラジオボタンの「はい」を選択すると複数のラジオボタンがアクティブになるJavaScriptがわからず困っております。教えて頂けないでしょうか。 (ページ開いた際は「いいえ checked」で複数ラジオボタンはグレーで選択無効) 用途はアンケートフォームです。 可能であればシンプルなソースで「最新のWinIE、MacSafari」に対応していると非常に助かります。先輩方よろしくお願いします。 <form name="form2" method="post" action=""> <table> <tr> <td>■「はい」を選択すると、ラジオボタン(カテゴリー1~4)がアクティブになる。 </td> </tr> <tr> <td> <input name="radiobutton" type="radio" value="radiobutton">はい <input name="radiobutton" type="radio" value="radiobutton" checked>いいえ </td> </tr> <tr> <td> <input name="radiobutton" type="radio" value="radiobutton">カテゴリー1 <input name="radiobutton" type="radio" value="radiobutton">カテゴリー2 <input name="radiobutton" type="radio" value="radiobutton">カテゴリー3 <input name="radiobutton" type="radio" value="radiobutton">カテゴリー4 </td> </tr> </table> </form>

  • jsでラジオボタンによって表示内容を変えたい

    とても困っているのでお力をお貸しください。 HTML側に ==================================================== <table summary="条件問題"> <tr> <th>問題1</th> <td> <ul> <li><input type="radio" name="AAAAAA" value="あああ" id="a1" onclick="mondaiChange1();"/> <label for="a1"> あああ</label></li> <li><input type="radio" name="AAAAAA" value="いいい" id="a2" onclick="mondaiChange1();"/> <label for="a2"> いいい</label></li> <li><input type="radio" name="AAAAAA" value="ううう" id="a3" onclick="mondaiChange1();"/> <label for="a3"> ううう</label></li> <li><input type="radio" name="AAAAAA" value="えええ" id="a4" onclick="mondaiChange1();"/> <label for="a4"> えええ</label></li> <li><input type="radio" name="AAAAAA" value="おおお" id="a5" onclick="mondaiChange1();"/> <label for="a5"> おおお</label></li> </ul> </td> </tr> </table> <div class="TableA"> <table summary="問題その2" id="TableA"> <tr> <th>Q1</th> <td> <ul> <li> <input type="radio" value="はい" id="b1" name="BBBBBBB" /> <label for="b1"> はい</label> </li> <li> <input type="radio" value="いいえ" id="b2" name="BBBBBBB" /> <label for="b2"> いいえ</label> </li> </ul></td> </tr> </table> <div class="TableB"> <table summary="問題その2" id="TableB"> <tr> <th>Q1</th> <td> <ul> <li> <input type="radio" value="はい" id="b1" name="BBBBBBB" /> <label for="b1"> はい</label> </li> <li> <input type="radio" value="いいえ" id="b2" name="BBBBBBB" /> <label for="b2"> いいえ</label> </li> </ul></td> </tr> </table> ========================== と記載。 includeしているjsファイル側に ========================== function mondaiChange1(){ radio = document.getElementsByName('AAAAAA') if(radio["a1"].checked) { //フォーム document.getElementById("TableA").style.display = "none"; document.getElementById("TableB").style.display = ""; } else if(radio["a2"].checked) { //フォーム document.getElementById("TableA").style.display = ""; document.getElementById("TableB").style.display = "none"; } else if(radio["a3"].checked) { //フォーム document.getElementById("TableA").style.display = "none"; document.getElementById("TableB").style.display = ""; } else if(radio["a4"].checked) { //フォーム document.getElementById("TableA").style.display = ""; document.getElementById("TableB").style.display = "none"; } else if(radio["a5"].checked) { //フォーム document.getElementById("TableA").style.display = "none"; document.getElementById("TableB").style.display = ""; } //オンロードさせ、リロード時に選択を保持 window.onload = mondaiChange1; } ========================== としているのですが、これだと最初にアクセスしたとき 問題その2のTableAとTableB両方のテーブルが表示されてしまいます。 (その後ラジオボタンを選択すると希望通りの動作になります。) //オンロードさせ、リロード時に選択を保持 window.onload = mondaiChange1; を入れたら大丈夫というのをネットで見たのですが、どう書き換えてもうまくいきません。 希望としては 最初にアクセスしたときは問題1の回答は何も選択されてない状態で、その下には何も表示されていない。 ↓ 問題1の選択肢を選択した時点で初めて「問題その2」のテーブルが選択したラジオボタンによってどちらかひとつ表示される、という風にしたいのですが、教えていただけないでしょうか?

  • ラジオボタンとテキストボックスで、ボタン選択時のテキストボックスの入力チェックするにはどうしたらよいでしょうか?

    ラジオボタンとテキストボックスの組合わせで使用し、ラジオボタン選択時のテキストボックスの入力チェックをするにはどうしたらよいのでしょうか? 以下はそのhtmlソースになります。 <table border="0" cellspacing="2" cellpadding="0"> <tr> <td><input type="radio" name="addsearch" value="検索エンジン" id="p1"></td> <td colspan="2"><label for="p1"><span class="stress2">検索エンジン</span></label></td> </tr> <tr> <td></td> <td>検索エンジン名</td> <td><INPUT TYPE=text NAME="addsearch1" VALUE="" SIZE=40></td> </tr> <tr> <td><input type="radio" name="addsearch" value="ご紹介で" id="p2"></td> <td colspan="2"><label for="p2"><span class="stress2">ご紹介で</span></label></td> </tr> <tr> <td></td> <td>ご紹介者のお名前をおしえてください。</td> <td><INPUT TYPE=text NAME="addsearch2" VALUE="" SIZE=40></td> </tr> <tr> <td><input type="radio" name="addsearch" value="広告を見て" id="p3"></td> <td colspan="2"><label for="p3"><span class="stress2">広告を見て</span></label></td> </tr> <tr> <td></td> <td>どこの広告ですか?</td> <td><INPUT TYPE=text NAME="addsearch3" VALUE="" SIZE=40></td> </tr> <tr> <td><input type="radio" name="addsearch" value="その他" id="p4"></td> <td colspan="2"><label for="p4"><span class="stress2">その他</span></label></td> </tr> <tr> <td></td> <td>具体的にお願いします。</td> <td><INPUT TYPE=text NAME="addsearch4" VALUE="" SIZE=40></td> </tr> </table> よろしくおねがいいたします。

    • ベストアンサー
    • HTML
  • VB6でWEBのラジオボタンの操作方法がわかりません

    始めまして、VB初心者です。 VB6でWEBのラジオボタンの操作方法が解りません。 以下のようなHTMLのWEBページがあります。 ラジオボタンをVB6にて操作(チェック)したいのですがどうしても出来ません。 テキスト入力の項目には入力できました。 IE.Document.All("test").Value = "テスト" 上記にてテストと入力できました。 HTMLソース <table> <tr> <td>選択してください </td> <td colSpan="2"><!-- <select name="j_type"> <option value="10">A</option> <option value="11">B</option> <option value="20">C</option> <option value="30">D</option> <option value="40">E</option> <option value="50">F</option> <option value="99">G</option> </select> <label><input type="checkbox" value="10" name="jArr[]">A</label>&nbsp; <label><input type="checkbox" value="11" name="jArr[]">B</label>&nbsp; <label><input type="checkbox" value="20" name="jArr[]">C</label>&nbsp; <label><input type="checkbox" value="30" name="jArr[]">D</label>&nbsp; <label><input type="checkbox" value="40" name="jArr[]">E</label>&nbsp; <label><input type="checkbox" value="50" name="jArr[]">F</label>&nbsp; <label><input type="checkbox" value="99" name="jArr[]">G</label>&nbsp;<br> </td> </table> </table> <p> </p> <table> <tr> <td>選択しましたか?</td> <td><label><input type="radio" CHECKED value="0" name="c_exp">はい</label> <label><input type="radio" value="1" name="c_exp">いいえ</label></td> </table> 自分で作った(ホームページ作成ソフト)WEBにVBから操作したいと思ったのですが、単純にvalueにて数値を入れてもだめなのでしょうか? 宜しくお願いいたします。

  • メールフォームのラジオボタンフィールドの件

    ホームページメールフォーム作成でご質問しました。 ラジオボタンとチェックボックスのフィールドで、その他項目を設けてテキストフィールドを作っているます。 このテキストフィールドにもラジオボタンまたは、チェックボックスのチェックを行えるようにできないでしょうか。 ○あああ ○いいい ○ううう ○えええ ○その他 □(ここにテキスト入力フィールド) ※javascriptを作る必要があるでしょうか。 下記のソースが、現状です。 <tr><td class="item_name">設問</td> <td class="item_form"> <table border="0" cellpadding="0" cellspacing="0"> <tr><td><input name="設問ABC" type="radio" value="Webサイト1" class="radio" id="toi2" /></td> <td valign="bottom"><label for="toi2">Webサイト1</label></td></tr> <tr><td><input name="設問ABC" type="radio" value="Webサイト22" class="radio" id="toi2" /></td> <td valign="bottom"><label for="toi2">Webサイト22</label></td></tr> <tr><td><input name="設問ABC" type="radio" value="Webサイト333" class="radio" id="toi2" /></td> <td valign="bottom"><label for="toi2">Webサイト333</label></td></tr> <tr><td><input name="設問ABC" type="radio" value="Webサイト555" class="radio" id="toi2" /></td> <td valign="bottom"><label for="toi2">Webサイト555</label></td></tr> </table> <div>その他:<input type="text" name="設問ABC" style="width:280px" /></div> </td></tr>

  • チェックされたラジオボタンにフォーカスを移動したい

    <LABEL><INPUT type="radio" id="a" value="0" checked>すべて</LABEL><BR> <LABEL><INPUT type="radio" id="a" value="1">一部</LABEL><BR> <LABEL><INPUT type="radio" id="a" value="2">なし</LABEL><BR> <LABEL><INPUT type="radio" id="b" value="0" checked>すべて</LABEL><BR> <LABEL><INPUT type="radio" id="b" value="1">一部</LABEL><BR> <LABEL><INPUT type="radio" id="b" value="2">なし</LABEL><BR> <LABEL><INPUT type="radio" id="c" value="0" checked>すべて</LABEL><BR> <LABEL><INPUT type="radio" id="c" value="1">一部</LABEL><BR> <LABEL><INPUT type="radio" id="c" value="2">なし</LABEL><BR> ・・・ のようにラジオボタンがグループ別に並んでいる場合に Enterキーを押したときにフォーカスが次のラジオボタングループの チェックが入ったラジオボタンにフォーカスを移動したいのですが、 何かいい方法はないでしょうか?

  • チェックボックス とラジオボタンの値取得について

    チェックボックス とラジオボタンの値取得について こんにちは チェックボックスの中にラジオボタンがある場合に チェックボックスの値に続けてラジオボタンの値を表示したいのですが、 うまくいかず悩んでいます。 【やりたいこと】 □そのた2をチェクして男性を選択した場合 「そのた2 男性」と表示したい。 例 そのた1 そのた2 男性 そのた4 そのた5 女性 サンプルのチェックボックスのlabelタグをはずすと $(vals[i]).next($("input[name='radio']:checked").val()); で値を取得できたのですが、 labelタグを付けたまま値を取得することは可能でしょうか? labelタグをつけたまま、 $(vals[i]).find($("input[name='radio']:checked").val()); でやってみたのですが、undefindがでてしまいました。 サンプルではチェックボックスの数は1個ですが、 □が30個以上 のチェックボックスが50個くらいあるので、 1回の記述で済ませたいのですが、 ラジオボタンが隣にあったら値を取得する のようにできるのでしょうか? 何かよい方法があれば教えて頂けないでしょうか。 よろしくお願い致します。 ■サンプルソース <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script type="text/javascript" language="JavaScript"></script> <script language="javascript"> <!-- function textb(){ var str=""; var vals = document.forms['f'].elements['q1']; for(i=0; i<vals.length; i++){ if(vals[i].checked){ str=str + vals[i].value + '\n'; } } document.f.log.value=str; } --> </script> <title></title> </head> <body> <form name="f"> <div>アンケート<br> <label for="1"><input type="checkbox" name="q1" class="chex" id="1" value="その1"> その1</label><br> <label for="2"><input type="checkbox" name="q1" class="chex" id="2" value="その2"> その2</label> <input type="radio" name="radio1" value="可">男性 <input type="radio" name="radio1" value="否">女性 <br> <label for="3"><input type="checkbox" name="q1" class="chex" id="3" value="その3"> その3</label><br> <label for="4"><input type="checkbox" name="q1" class="chex" id="4" value="その4"> その4</label><br> <label for="5"><input type="checkbox" name="q1" class="chex" id="5" value="その5"> その5</label> <input type="radio" name="radio2" value="可">男性 <input type="radio" name="radio2" value="否">女性 <br> </div> <input type="button" value="確認" onclick="textb()"> <input type="reset" value="クリア"> <br> <textarea name="log" rows="4" cols="50"></textarea></form> </body> </html>