- ベストアンサー
ラジオボタンのフォーカス移動方法について
- ラジオボタンのグループ別に並んでいる場合、Enterキーを押したときに次のラジオボタングループのチェックが入ったラジオボタンにフォーカスを移動する方法を探しています。
- ラジオボタンのフォーカスを移動する方法について悩んでいます。ラジオボタンがグループ別に並んでおり、Enterキーを押したときに次のグループのチェックが入ったラジオボタンにフォーカスを移動させたいです。
- ラジオボタンのグループごとに次のラジオボタンにフォーカスを移動したいです。ラジオボタンのグループが複数ある場合でも、Enterキーを押したときに次のグループのラジオボタンにフォーカスが移るようにしたいです。
- pentaro_2000
- お礼率66% (6/9)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- ラジオボタンの未選択チェックについて
ラジオボタンの未選択チェックに困っています！ フォームにInputして、CGIで送信するように設定しています。 但し、送信内容を管理者がメール受信するため、ラジオボタンの「name」は漢字にしています。 ＜name＞ ＜value＞ Webの見やすさ ＝ 見やすい と表示されるようにです。 <INPUT type="radio" name="Webの見やすさ" value="見やすい" id="Q11"><label for="Q11"> 見やすい</label> <INPUT type="radio" name="Webの見やすさ" value="特に問題ない" id="Q12"><label for="Q12"> 特に問題ない</label> <INPUT type="radio" name="Webの見やすさ" value="ふつう" id="Q13"><label for="Q13"> ふつう</label> <INPUT type="radio" name="Webの見やすさ" value="やや見にくい" id="Q14"><label for="Q14"> やや見にくい</label> <INPUT type="radio" name="Webの見やすさ" value="見にくい" id="Q15"><label for="Q15"> 見にくい</label></TD> この場合、ラジオボタンの未選択チェックは、どのようにしたら いいのでしょうか？ 今までは、「name」を英数にしていたので、下記のようにしていました。 <script language="JavaScript"> <!-- function chk(oj) { if ((oj.Q1[0].checked == false) && (oj.Q1[1].checked == false) && (oj.Q1[2].checked == false) && (oj.Q1[3].checked == false) && (oj.Q1[4].checked == false)) { alert("Ｑ１のボタンが未選択です"); return false ; } else { return true ; } }//--> </script> 初心者のため、何を変えたらいいのか・・・ホームページを調べたのですが分かりませんでした。 「name」が漢字の場合、どのように指示したらいいのか、ぜひぜひご教授願います。 どうぞよろしくお願いいたします。
- 締切済み
- JavaScript
- selectした項目によって、radioボタンの値を変える方法
selectボックスの値によって、ラジオボタンに自動的にチェックを入れるというものを作りたいのですが、やり方がわからないのでどなたか回答をお願いします。 selectボックスは、 <select name="Q01" id="Q01"> <option selected>▼選択</option> <option value="1">Ａコース</option> <option value="2">Ｂコース</option> <option value="3">Ｃコース</option> </select> というようなものを用意しています。 ラジオボタンは、 <label for="Q02_1"> 有り<input name="Q02" type="radio" id="Q02_1" value="0" checked> </label> <label for="Q02_2"> 無し<input name="Q02" type="radio" id="Q02_2" value="1"> </label> <label for="Q03_1"> 有り<input name="Q03" type="radio" id="Q03_1" value="0" checked> </label> <label for="Q03_2"> 無し<input name="Q03" type="radio" id="Q03_2" value="1"> </label> <label for="Q04_1"> 有り<input name="Q04" type="radio" id="Q04_1" value="0" checked> </label> <label for="Q04_2"> 無し<input name="Q04" type="radio" id="Q04_2" value="1"> </label> ・ ・ ・ ・ というようなものを用意しています。 Ａコースを選ぶと、 Q02は「有り」、Q03は「無し」、Q04は「有り」 Ｂコースを選ぶと、 すべて「有り」 Ｃコースを選ぶと、 すべて「無し」 というような、コースによってラジオボタンにチェックが入るという仕組みです。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- チェックボックス とラジオボタンの値取得について
チェックボックス とラジオボタンの値取得について こんにちは チェックボックスの中にラジオボタンがある場合に チェックボックスの値に続けてラジオボタンの値を表示したいのですが、 うまくいかず悩んでいます。 【やりたいこと】 □そのた２をチェクして男性を選択した場合 「そのた２ 男性」と表示したい。 例 そのた１ そのた２ 男性 そのた４ そのた５ 女性 サンプルのチェックボックスのlabelタグをはずすと $(vals[i]).next($("input[name='radio']:checked").val()); で値を取得できたのですが、 labelタグを付けたまま値を取得することは可能でしょうか？ labelタグをつけたまま、 $(vals[i]).find($("input[name='radio']:checked").val()); でやってみたのですが、undefindがでてしまいました。 サンプルではチェックボックスの数は１個ですが、 □が３０個以上 のチェックボックスが５０個くらいあるので、 １回の記述で済ませたいのですが、 ラジオボタンが隣にあったら値を取得する のようにできるのでしょうか？ 何かよい方法があれば教えて頂けないでしょうか。 よろしくお願い致します。 ■サンプルソース <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>
- ベストアンサー
- JavaScript
- ラジオボタンとチェックボックスの計算について
ラジオボタンとチェックボックスで選択して、その合計を表示させたいのですが、合計の最高は50になる用に作ったのですが、9点にしかなりません。 私が考えるに、<script language="JavaScript">～</script>の間が間違っていると思うのですがどうでしょうか？ 皆様ご教授の程お願いします。 <script language="JavaScript"> <!-- // 項目の合計を計算 function ttlValue() { chn = 10; // ラジオボタンとチェックボックスの総数 ttl = 0; for(i=0; i<chn; i++) { if(document.nForm.elements[i].checked) { ttl += eval(document.nForm.elements[i].value); } } document.nForm.result.value = ttl; } //--> </script> </head> <body alink="#000000" bgcolor="#f0f8ff" link="#00ffff" text="#000000" vlink="#ff0000"> <br> それぞれの項目で該当する回答を1つずつ選択して下さい。 <form name="nForm">項目1<br> <input name="ch1" value="3" checked="checked" type="radio">a<br> <input name="ch1" value="2" type="radio">b<br> <input name="ch1" value="1" type="radio">c<br> <input name="ch1" value="0" type="radio">d<br> <br> 項目2<br> <input name="ch2" value="3" checked="checked" type="radio">a<br> <input name="ch2" value="2" type="radio">b<br> <input name="ch2" value="1" type="radio">c<br> <input name="ch2" value="0" type="radio">d<br> <br> 項目3<br> <input name="ch3" value="3" checked="checked" type="radio">a<br> <input name="ch3" value="2" type="radio">b<br> <input name="ch3" value="1" type="radio">c<br> <input name="ch3" value="0" type="radio">d<br> <br> 項目4<br> <input name="ch4" value="1" checked="checked" type="radio">a<br> <input name="ch4" value="0" type="radio">b<br> <br> 項目5<br> <input name="ch5" value="1" checked="checked" type="radio">a<br> <input name="ch5" value="0" type="radio">b<br> <br> オプションがあれば選択して下さい。（複数選択可）<br> <input name="bx1" value="1" type="checkbox">1<br> <input name="bx1" value="1" type="checkbox">2<br> <input name="bx1" value="1" type="checkbox">3<br> <input name="bx1" value="1" type="checkbox">4<br> <input name="bx1" value="1" type="checkbox">5<br> <input name="bx1" value="1" type="checkbox">6<br> <input name="bx1" value="1" type="checkbox">7<br> <input name="bx1" value="1" type="checkbox">8<br> <input name="bx1" value="1" type="checkbox">9<br> <input name="bx1" value="1" type="checkbox">10<br> <input name="bx1" value="1" type="checkbox">11<br> <input name="bx1" value="1" type="checkbox">12<br> <input name="bx1" value="1" type="checkbox">13<br> <input name="bx1" value="1" type="checkbox">14<br> <input name="bx1" value="1" type="checkbox">15<br> <input name="bx1" value="1" type="checkbox">16<br> <input name="bx1" value="1" type="checkbox">17<br> <input name="bx1" value="1" type="checkbox">18<br> <input name="bx1" value="1" type="checkbox">19<br> <input name="bx1" value="1" type="checkbox">20<br> <input name="bx1" value="1" type="checkbox">21<br> <input name="bx1" value="1" type="checkbox">22<br> <input name="bx1" value="1" type="checkbox">23<br> <input name="bx1" value="1" type="checkbox">24<br> あなたの獲得したメダルは何色？<br> <select name="ch2"> <option value="0" selected="selected">なし</option> <option value="5">金メダル</option> <option value="3">銀メダル</option> <option value="1">銅メダル</option> </select> <br> <br> メダル獲得まで何年かかりましたか？<br> 項目6<br> <input name="ch6" value="10" checked="checked" type="radio">20年以上<br> <input name="ch6" value="5" type="radio">19年～10年<br> <input name="ch6" value="3" type="radio">9年～5年<br> <input name="ch6" value="1" type="radio">4年～3年<br> <input name="ch6" value="0" type="radio">2年未満<br> <br> <input value="合計金額を計算" onclick="ttlValue()" type="button"><br> <br> 合計<input name="result" size="10" type="text"> </form> <br>
- ベストアンサー
- JavaScript
- Formのラジオボタンリセット方法
下記のradioボタンのグループr1、r2、r3、r4のうちグループr1とr2だけを同時にリセットする方法はありますか？ グループ1つリセットする方法はわかりますが、2つリセットになると方法が分かりません。 良い方法はありませんか？よろしくお願いします。 <form> <p> <input type="radio" name="r1" value="1" checked>1<br> <input type="radio" name="r1" value="2">2<br> <input type="radio" name="r1" value="3">3 </p> <p> <input type="radio" name="r2" value="a" checked>a<br> <input type="radio" name="r2" value="b">b<br> <input type="radio" name="r2" value="c">c </p> <p> <input type="radio" name="r3" value="a" checked>a<br> <input type="radio" name="r3" value="b">b<br> <input type="radio" name="r3" value="c">c </p> <p> <input type="radio" name="r4" value="a" checked>a<br> <input type="radio" name="r4" value="b">b<br> <input type="radio" name="r4" value="c">c </p> </form>
- 締切済み
- JavaScript
- クリックしたラジオボタンの行番号を取得したい
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); }); どのようにしたら良いでしょうか？ 宜しくお願いいたします。
- ベストアンサー
- JavaScript
- ラジオボタンが未選択時の制御方法について
たびたびお世話になっております。 Webフォームを思考策後しながら作成しています。 下記のラジオボタン1 とラジオボタン3 は選択して、 ラジオボタン2 は選択せずに出力する下記のように、 ハヌけした書式で出力されます。 ハヌけしないように出力させる方法はありますでしょうか？ ご教授をお願いいたします。 出力結果： ------------------------------------------------------------------------------- 【ラジオボタン1】：回答1 【ラジオボタン3】：回答1 ソース： ------------------------------------------------------------------------------- <head> <title>アンケートフォーム</title> <script type="text/javascript"> <!-- 値の加工用// --> function textoutput() { <!-- フォームを変数に// --> var formObj = document.form01; <!-- radioを取得// --> var radio01 = formObj.A01; <!-- radioを取得// --> var radio02 = formObj.A02; <!-- radioを取得// --> var radio03 = formObj.A03; <!-- textを結合用の変数として準備// --> <!-- A01の中から選択されているものを取得// --> var text = '下記リカバリシートを案内' + '\n'; <!-- A02の中から選択されているものを取得// --> for ( var i = 0; i < radio01.length; i ++ ) { if ( radio01[i].checked === true ) { text += '【ラジオボタン1】：' + '\n' + radio01[i].value;}} text += '\n'; <!-- A02の中から選択されているものを取得// --> for ( var i = 0; i < radio02.length; i ++ ) { if ( radio02[i].checked === true ) { text += '【ラジオボタン2】：' + '\n' + radio02[i].value;}} text += '\n'; <!-- A02の中から選択されているものを取得// --> for ( var i = 0; i < radio03.length; i ++ ) { if ( radio03[i].checked === true ) { text += '【ラジオボタン3】：' + '\n' + radio03[i].value;}} text += '\n'; <!-- output.valueにtextを反映(最後に改行コード)// --> formObj.output.value = text + '\n'; } </script> </head> <body> <strong>アンケートフォーム</strong><br /><br /> <form name="form01"> <!--ラジオボタン// --> <strong>・ラジオボタン1</strong><br /> <input type="radio" name="A01" value="回答1" id="radio1-1" " tabindex="3"> <label for="radio1-1">回答1</label> <input type="radio" name="A01" value="回答2" id="radio1-2" " tabindex="4"> <label for="radio1-2">回答2</label> <input type="radio" name="A01" value="回答3" id="radio1-3" " tabindex="5"> <label for="radio1-3">回答3</label> <br /> <!--ラジオボタン// --> <strong>・ラジオボタン2</strong><br /> <input type="radio" name="A02" value="回答1" id="radio1-1" > <label for="radio1-1">回答1</label> <input type="radio" name="A02" value="回答2" id="radio1-2"> <label for="radio1-2">回答2</label> <input type="radio" name="A02" value="回答3" id="radio1-3"> <label for="radio1-3">回答3</label> <br /> <!--ラジオボタン// --> <strong>・ラジオボタン3</strong><br /> <input type="radio" name="A03" value="回答1" id="radio1-1" > <label for="radio1-1">回答1</label> <input type="radio" name="A03" value="回答2" id="radio1-2"> <label for="radio1-2">回答2</label> <input type="radio" name="A03" value="回答3" id="radio1-3"> <label for="radio1-3">回答3 </label> <br /> <!--ログ出力// --> ログ出力<br> <input type="button" value="ログ出力" onClick="textoutput();"> <input type="reset" value="リセット"><br> <textarea name="output" cols="60" rows="10"></textarea><br> </form> </body> </html>
- ベストアンサー
- JavaScript
- ラジオボタンの選択でチェックボックスのON/OFFを連動
ラジオボタンを選択すると、連動してチェックボックスにチェックが入れられる仕組みを作りたいのですが。 本番環境ではこの仕組みを3つほど使用したいです。 現在ここまでは出来ていますが、2つ・3つとこの仕組みを増やすと、動作が出来なくなってしまいます。 さらに、ラジオボタンを選択するたびにチェックボックスのチェックが初期化される仕組みにしたいのですが・・・＞＜ どなたか教えて頂けないでしょうか？ <html> <head> <script> window.onload=function(){ document.getElementById("deta1").onclick=function(){ detagroupDisabled(this.form,true); } document.getElementById("deta2").onclick=function(){ detagroupDisabled(this.form,true); } document.getElementById("deta3").onclick=function(){ detagroupDisabled(this.form,false); } } function detagroupDisabled(f,flg){ var objs=f.getElementsByTagName("input"); for(var i=0;i<objs.length;i++){ if(objs[i].className=="detagroup") objs[i].disabled=flg; } } </script> </head> <body> <form action="./postmail.cgi" method="post"> <input type="radio" name="FPCデータ" id="deta3" value="アリ"><label for="deta3">アリ</label> <input type="checkbox" name="FPCデータ アリ" id="DXF" class="detagroup" value="DXF" disabled><label for="DXF">DXF</label> <input type="checkbox" name="FPCデータ アリ" id="ガーバ" class="detagroup" value="ガーバ" disabled><label for="ガーバ">ガーバ</label> <input type="checkbox" name="FPCデータ アリ" id="PDF" class="detagroup" value="PDF" disabled><label for="PDF">PDF</label> <input type="radio" name="FPCデータ" id="deta1" value="ナシ" checked><label for="deta1">ナシ</label> <input type="radio" name="FPCデータ" id="deta2" value="アリ"><label for="deta2">相談</label><br><br> <input type="radio" name="補強板" value="ナシ" checked="checked">ナシ <input type="radio" name="補強板" value="アリ">アリ <input type="checkbox" name="補強板" value="ポリイミド">ポリイミド <input type="checkbox" name="補強板" value="ポリエステル">ポリエステル <input type="checkbox" name="補強板" value="ガラエポ">ガラエポ <input type="checkbox" name="補強板" value="相談">相談<br><br> <input type="radio" name="印刷" value="ナシ" checked="checked">ナシ <input type="radio" name="印刷" value="アリ">アリ <input type="checkbox" name="印刷" value="銀シールド">銀シールド <input type="checkbox" name="印刷" value="銀ペースト">銀ペースト <input type="checkbox" name="印刷" value="銅ペースト"> 銅ペースト <input type="checkbox" name="印刷" value="シルク">シルク 色 <SELECT NAME="印刷"> <OPTION SELECTED VALUE="---">--- <OPTION VALUE="白">白 <OPTION VALUE="黒">黒 <OPTION VALUE="他">他 </SELECT> </form> </body> </html>
- 締切済み
- JavaScript
- ラジオボタンについて
こんにちは。ラジオボタンについて質問させてください。 <input type="radio" name="area" value="all" onClick="area.value = 'all'" checked>ALL<br> <input type="radio" name="area" value="a" onClick="area.value = 'a'">A<br> <input type="radio" name="area" value="b" onClick="area.value = 'b'">B<br> というHTMLを記述しました。 画面が表示された後にラジオボタンをチェックして実行（別個作成）すると うまく動作するのですが、チェックボタンをチェックしずに （デフォルトの'ALL'選択のまま）実行するとうまくいきません。 どのようにすればうまく動作するのでしょうか？
- ベストアンサー
- HTML
- javascriptからラジオボタンへのアクセス
cakephpで以下のソースを書き、ラジオボタンタグを出力しました。 $form->create('name' => 'form') $form->radio('TestModel.field',array('指定なし', '無', '有'), 'value' => 0)); $form->end(); ----出力されたHTML（formタグなどは省略しています）------ <input type="radio" name="data[TestModel][field]" id="TestModelField0" value="0" checked="checked" > <label for="TestModelField0">指定なし</label> <input type="radio" name="data[TestModel][field]" id="TestModelField1" value="1" > <label for="TestModelField1">無</label> <input type="radio" name="data[TestModel][field]" id="TestModelField2" value="2" > <label for="TestModelField2">有</label> -------------------------------- [リセット]ボタンのようなのを押した時に、'指定なし'の初期値を選択するようにしたいので、 javascriptでしようとしているのですが、 name属性が"data[TestModel][field]"のためか、 document.form.data[ModelTest][field].value = 0とするとエラーになってしまいます。 (TestModelは宣言されていません。というエラー） ラジオボタンのグループは複数あります。 ラジオボタンにアクセスするにはどうしたらよいでしょうか。
- ベストアンサー
- JavaScript
お礼
うまくできました。 オブジェクトも比較できるんですね。 勉強になりました。ありがとうございました。