• ベストアンサー

nameにハイフンを入れてラジオボタン未選択を判定したい

Javascriptにてひとつ問題が起こりました。 2つのラジオボタンがあり、どちらも選択せずに選択ボタンを押した時、「どちらかを選択して下さい」とメッセージが出るようにしたいです。 Javascriptは、nameにハイフンが入っていると動作しないようですが、nameにハイフンを入れて動作させなくてはならない状況です。 （nameにハイフンを入れなければ動作するのですが・・・） 私が調べたところ、下記のスクリプトでは、["SELECT-1"]や['SELECT-1']に変更しても動作しませんでした。 下記のスクリプトを別の書き方に変更すれば可能なのかもわかりませんが、詳しくないので書けません。 nameにSELECT-1（途中にハイフンがあり、その後に数字が続きます）を使って可能な記述方法がございましたら、教えて下さい。 下記のような記述ではなくても、nameがSELECT-1で動作するのであれば、変更しても構わないです。 ご存知の方、教えて下さい！ どうぞよろしくお願い致します。 <html> <head> <script language="javascript"> <!-- function choice(){ if((document.form1.SELECT-1[0].checked==false)&& (document.form1.SELECT-1[1].checked==false)) alert("どちらかを選択して下さい"); } </script> </head> <body> <form name="form1"> <input type="radio" name="SELECT-1" value="A">A <input type="radio" name="SELECT-1" value="B">B <input type="button" value="選択" onClick="choice()"> </form> </body> </html>

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.6

formはonsubmitでfalseを受けると送信しません。 その動作を理解すれば以下のようなスクリプトに なります。 <html> <head> <script language="javascript"> function choice(f){ for (var i=0;i<f.length;i++){ if(f[i].type=="radio" && f[i].name=="SELECT-1" && f[i].checked==true) return true; } alert("どちらかを選択して下さい"); return false; } </script> </head> <body> <form method="post" action="abc.cgi" onSubmit="return choice(this)"> <input type="radio" name="SELECT-1" value="A">A <input type="radio" name="SELECT-1" value="B">B <input type="submit" value="選択""> <input type="reset" value="クリア"> </form> </body> </html>

fuuuuumi
質問者

お礼

またまたありがとうございます！ 完璧です！希望通りの動作が確認できました。 本当に助かりました。感謝します！

その他の回答 (5)

noname#22259
noname#22259
回答No.5

>>No.3（訂正）T_T ×　○　if((obj[0].checked==false&&obj[1].checked==false){ ○　if(obj[0].checked==false&&obj[1].checked==false){

fuuuuumi
質問者

お礼

ありがとうございます！ 訂正すると動作しました。

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.4

厳密に書くとこんな感じです。 radioは一つ一つが独立したオブジェクトだと 気が付けば、フォームの１要素として評価できます。 <html> <head> <script language="javascript"> function choice(f){ for (var i=0;i<f.length;i++){ if(f[i].type=="radio" && f[i].name=="SELECT-1" && f[i].checked==true) return f[i].value; } alert("どちらかを選択して下さい"); } </script> </head> <body> <form> <input type="radio" name="SELECT-1" value="A">A <input type="radio" name="SELECT-1" value="B">B <input type="button" value="選択" onClick="choice(this.form)"> <input type="reset" value="クリア"> </form> </body> </html>

fuuuuumi
質問者

お礼

ご回答ありがとうございます！！ 実際に使用したいページで動作しました。

fuuuuumi
質問者

補足

ご回答ありがとうございます！ ところが、もうひとつ問題が生じてしまいました。。。 きちんと書くべきでした。申し訳ないです！ 実は、ボタンを押すことでCGIが動き、ラジオボタンの結果ページが表示されます。 ところが、このままですと、「どちらかを選択してください」とエラーメッセージが出てOKボタンを押した後、 そのままCGIの動作に入ってしまい、ラジオボタンの結果が出ないままのページが表示されてしまいます。 <form method="post" action="abc.cgi"> こんな感じで書いてあるのですが・・・ 「どちらかを選択してください」とエラーメッセージが出てOKボタンを押した後、 CGIの動作を中断させ、再びラジオボタンの選択ページを表示させる場合の処理の仕方はございますでしょうか？ もし、対策がございましたら、教えていただけないでしょうか？ Javascriptで解決できるような感じがするのですが・・・ よろしくお願い致します。

noname#22259
noname#22259
回答No.3

>>No.2（訂正） ×　if((obj[0].checked==false)&&(obj[1].checked==false){ ○　if((obj[0].checked==false&&obj[1].checked==false){ ------ 等価演算子は論理演算子より優先順位が高いので、質問のコードの if((document.form1.SELECT-1[0].checked==false)&& (document.form1.SELECT-1[1].checked==false)) のように余分な括弧でくくる必要はありません。 間違いの元です。

fuuuuumi
質問者

お礼

ありがとうございます。 No.2のスクリプトで、訂正分を訂正して試しましたが、なぜか動作しませんでした。 余分に（）でくくるとよくないのですね。 本から抜粋したスクリプトにnameなどを変更したのですが、問題があるのかも知れませんね。 私自身がチンプンカンプンなので、どこに問題があるのかさっぱりわかりませんでした。。。

noname#22259
noname#22259
回答No.2

<script type="text/javascript"> function choice(){ obj=document.form1['SELECT-1']; if((obj[0].checked==false)&&(obj[1].checked==false){ alert("どちらかを選択して下さい"); } } </script> </head> <body> <form name="form1"> <input type="radio" name="SELECT-1" value="A">A <input type="radio" name="SELECT-1" value="B">B <input type="button" value="選択" onClick="choice()"> </form>

  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 if((document.form1.SELECT-1[0].checked==false)&& (document.form1.SELECT-1[1].checked==false)) alert("どちらかを選択して下さい"); } を if((document.form1.elements['SELECT-1'][0].checked==false)&& (document.form1.elements['SELECT-1'][1].checked==false)) alert("どちらかを選択して下さい"); } に変更することで出来ませんか？ document.form1.elements['SELECT-1']; でform1のSELECT-1の要素が取れると思います。

fuuuuumi
質問者

お礼

ありがとうございました！ 単独ページでは、動作致しました。 ところが、実際に使用するページに当てはめて置き換えてみると、ページごと表示されなくなってしまいました。 やはり、私のもともとのJavascriptの記述に問題があるかも知れません。（本から抜粋したんですけどねぇ・・・）

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 選択したたラジオボタンの値をSUBMITボタンに

    選択したたラジオボタンの値をSUBMITボタンの名前として自動的に替えたいのですが、助言をいただけますか。 イメージは下記です。★の部分に、クリックごとにradioの値を入れたいのです。 <script Language="JavaScript"><!-- function set() { n = document.myFORM.Radio.value; } // --> </script> <FORM ACTION="add.cgi" METHOD="POST" name="myFORM"> <INPUT TYPE="RADIO" NAME="Radio" VALUE="東京" onclick="set()" CHECKED> <INPUT TYPE="RADIO" NAME="Radio" VALUE="大阪"> <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="★"></form>

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

    ■下記サンプルソースのラジオボタンの「はい」を選択すると複数のラジオボタンがアクティブになる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>

  • ボタンを押したらラジオボタンを選択したい(サンプルソース付)

    ボタンを押したら、ラジオボタンを選択するようにしたいと思っています。 なんとかチェックボックス、セレクトボックス(?)はうまくいったのですが、どうしてもラジオボタンだけがうまくいきません。どうすればよいでしょうか？ ※document.forms[0].R1[0].checked = true; のようにすると意図した通りに動作することはわかったのですが、項目が増えた時にミスの原因になりますので、できるだけ"a"や"b"とvalueを使いたいと思っています。 すみませんが、よろしくお願いします。 -- <html> <head> <SCRIPT language="JavaScript"><!-- function check() { document.forms[0].C1.checked = true; document.forms[0].S1.value = "3"; document.forms[0].R1.value = "a"; } //--></SCRIPT> <title></title> </head> <body> <form> <input type="checkbox" value="yes" name="C1"><br> <select name="S1"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select><br> <input type="radio" name="R1" value="a"><input type="radio" name="R1" value="b"><br> <input type="button" onclick="javascript:check()"> </form> <br> </body> </html>

  • 複数のラジオボタン選択肢によりsubmitを押せなくする

    初めて質問させていただきます。 ラジオボタンが下記の選択状態の時だけ「送信（submit）」ボタンを enable で表示させたいです。 １：●　２：○ １：●　２：○ それ以外の選択肢では「送信（submit）」ボタンを disabl で押せないようにしたいです。 調べて、近い動作にはなりましたが、javascriptに関して 殆ど知識がないため、これから先がさっぱりわかりません。 ぜひ教えを乞いたく参りました。お知恵をお貸しください<(__)> どうぞ宜しくお願い致します。 <HTML> <HEAD> <script type="text/javascript"><!-- function unlock1(el){el.form.send.disabled=false;} function unlock2(el){el.form.send.disabled=true;} //--> </script> <form> 1:<input type="radio" name="radio1" value="1" onClick="unlock1(this)"> 2:<input type="radio" name="radio1" value="2" onClick="unlock2(this)"><br> 1:<input type="radio" name="radio2" value="1" onClick="unlock1(this)"><br> 2:<input type="radio" name="radio2" value="2" onClick="unlock2(this)"><br> <input name="send" type="submit" value="送信" disabled > </form> </BODY> </HTML>

  • ラジオボタンの値を・・・・・

    <html> <head> <script language="javascript"> function osu(){ document.form1.text1.value=document.form1.radio1.value; } </script> </head> <body> <form name="form1"> <input type="radio" name="radio1" value="男" checked>男 <input type="radio" name="radio1" value="女">女 <input type="button" value="押す" onClick="osu()"> <input type="text" name="text1"> </form> </body> </html> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 上記のプログラムは、選択されたラジオボタンの値をテキストボックスに表示させるプログラムなんですが、何故かラジオボタンの値が表示されず、「undefined」というのが表示されます。 どうすれば、「男」または「女」という値を表示させることができますか？ ちなみにこれは、「○○○．ｈｔｍｌ」で保存します

  • 複数のラジオボタンのチェック

    複数のラジオボタンが全て選択されているかどうかのチェックのJavaScriptをすっきりした形で書くのは、どうしたらいいでしょうか？ 下記のようですと、ダラダラと記述するようになってしまいます。 どなたかご教授ください。 --------------------------------------- <script type="text/javascript"> function insert_onClick() { j=0; for (i=0 ;i < document.F1.a11.length ; i++){ if (document.F1.a11[i].checked) { j=1; } } } </script> <form action="check.php" name="F1" onsubmit="return insert_onClick()"> 各valueは0～4まであります <input type="radio" name="a11" value="0"> <input type="radio" name="a12" value="0"> <input type="radio" name="a21" value="0"> <input type="radio" name="a22" value="0"> <input type="radio" name="b11" value="0"> <input type="radio" name="b12" value="0"> <input type="radio" name="b21" value="0"> <input type="radio" name="b22" value="0"> ---------------------------------------

  • ラジオボタンのnameに別々の文字列を入れてもグループにするには？

    ラジオボタンのnameに別々の文字列を入れてもグループにするには？ 前回こちらで、チェックボックスとラジオボタンの値を合計する方法を教えていただきました。 これで、ラジオボタンのnameを任意の文字列にした場合、グループにならないので全部選択できてしまいます。 nameを商品名、valueを価格として使いたいので、任意のnameを使用かつ一つだけ選択させるにはどうしたらよいでしょうか。 こちらの質問が正解に近いのかなと思いますが、どのように応用したらいいのかわかりません。http://okwave.jp/qa/q796874.html ご助言頂ければ幸いです。よろしくお願いいたします。 javascript(test_checked2.js)↓ function calc2() { var i = 0, f, frms = document.forms; var j, el, total = 0, num; while (f = frms[i++]) { j = 0; while (el = f.elements[j++]) { if (el.checked && (el.type == 'radio' || el.type == 'checkbox') && !isNaN(el.value)) total += 1 * el.value; } } num = total.toString(); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); document.getElementById('ch_all').innerHTML = '\\' + num; } html↓ <html> <head> <script type="text/javascript"> </script> <script type='text/javascript' src='test_checked2.js'></script> </head> <body> <div id="ch_all" style="background-color: #eeeeee;">&nbsp;</div> <hr /> <form name="Tform1"> <input type="radio" name="test" value="34500" onclick="calc2()"> \34,500 <input type="radio" name="test" value="15000" onclick="calc2()"> \15,000 <input type="radio" name="test" value="3000" onclick="calc2()"> \3,000 <input type="radio" name="test" value="4444" onclick="calc2()"> \4,444 </form> <form name="Tform2"> <input type="checkbox" name="test2" value="34500" onclick="calc2()"> \34,500 <input type="checkbox" name="test2" value="15000" onclick="calc2()"> \15,000 <input type="checkbox" name="test3" value="3000" onclick="calc2()"> \3,000 <input type="checkbox" name="test4" value="4444" onclick="calc2()"> \4,444 </form> </body> </html>

  • ラジオボタンの未選択チェックについて

    ラジオボタンの未選択チェックに困っています！ フォームに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のラジオボタン選択で値取得

    JavaScriptでフォームのラジオボタン選択で選択した項目に応じて、複数の変数に特定の数値を入れたいのですが、どうしたらいいでしょうか? ラジオボタンで仮に、 ・東京 ・大阪 ・名古屋 という選択があったとして、 (そのボタンの下部に<input type="button" value="Go!" onclick="hogehoge();">というような実行ボタンがあったとします) 東京を選んだ場合は、 a = 4; b = 3; 大阪を選んだ場合は、 a = 3; b = 2; 名古屋を選んだ場合は、 a = 5; b = 4; と、a/bに数値を入れたいです。 今現在下記のように書いたのですが、動作しません。 <script type="text/javascript"> function hogehoge() { no = document.hoge.a.value - 0; if(no == 1) { n1 = 4; n2 = 3; }else if(no == 2) { n1 = 3; n2 = 2; }else if(no == 3) { n1 = 5; n2 = 4; } document.hoge.no1.value = n1; document.hoge.no2.value = n2; } </script> <form name="hoge"> <input type="radio" name="a" value="1" checked>東京 <input type="radio" name="a" value="2">大阪 <input type="radio" name="a" value="3">名古屋 <br> <input type="button" value="Go!" onclick="hogehoge();"><br> <input type="text" size="5" name="no1"><br> <input type="text" size="5" name="no2"> </form> よろしくお願いいたします。

  • ラジオボタン選択でtextfieldをアクティブにするには？

    ■下記サンプルソースのラジオボタン「はい」を選択するとtextfieldがアクティブになるJavaScriptがわからず困っております。教えて頂けないでしょうか。 （ページ開いた際は「いいえ checked」でtextfieldはグレーで入力無効） 可能であればシンプルなソースで「最新のWinIE、MacSafari」に対応していると非常に助かります。先輩方よろしくお願いします。 <form name="form1" method="post" action=""> <table> <tr> <td>■「はい」を選択すると、textfield（カテゴリー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> カテゴリー1<input name="textfield" type="text" size="30" maxlength="30"> <br> カテゴリー2 <input name="textfield22" type="text" size="30" maxlength="30"> <br> カテゴリー3 <input name="textfield32" type="text" size="30" maxlength="30"> <br> カテゴリー4 <input name="textfield42" type="text" size="30" maxlength="30"> </td> </tr> </table> </form>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する