ラジオボタンのチェックの確認方法について

このQ&Aのポイント
  • JavaScriptを使用して、ラジオボタンのチェックの確認をしたいのですが、うまくいかないです。
  • 直接指定すれば動作はするものの、2回メッセージが表示される問題があります。
  • cgiでファイル数を増やすことができるようにしてあるため、ラジオボタンも増えるのですが、選択の確認がうまくいきません。
回答を見る
  • ベストアンサー

ラジオボタンのチェックの確認(cgiを使用で)

JavaScriptを使用して、ラジオボタンのチェックの確認をしたいのですが、うまくいかないので教えてください。 ○ a   ○ b というようになっていて、aかbを選択すればメッセージは出ない、どちらも選択してないときのみ 「選択してください」のようなメッセージを表示。 ラジオボタンの選択の有無は if(document.フォーム名.ラジオボタン名[0].checked == true){ のようにすればいいとききやってみました。 直接指定すれば、動作がおかしい(2回メッセージが出る)ものの、動作はしました。 cgiでファイル数を増やすことができるようにしてあるので、その分ラジオボタンも増えるので、 以下のようにしてみました。 for ($jscount = 1;$jscount<$FORM{'COUNT'}+1;$jscount++){ if(document.NYUURYOKU.SYURUI$jscount[0].checked == true){ }else if(document.NYUURYOKU.SYURUI$jscount[1].checked == true){ } else { alert('種類$jscountを選択してください'); return false; } しかしうまくいきません。 詳しい方よろしくお願いします。

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

  • ベストアンサー
noname#199778
noname#199778
回答No.2

再び失礼します。 すみません。 前回は、手元でCGIの動作確認を取れなかったので念のためにエスケープシーケンスを入れまくっていたら、肝心なところを見落としてました。 if (\!document.NYUURYOKU.SYURUI$jscount[0].checked \&\& \!document.NYUURYOKU.SYURUI$jscount[1].checked){ 前回回答したこの部分ですが、 if (!document.NYUURYOKU.SYURUI$jscount\[0].checked && !document.NYUURYOKU.SYURUI$jscount\[1].checked){ このように、[x]を記述させる部分をエスケープするか、 if (!document.NYUURYOKU.SYURUI${jscount}[0].checked && !document.NYUURYOKU.SYURUI${jscount}[1].checked){ このように変数$jscountの境界を{}で明示的に区切るかのいずれかをしてみてください。 これで解決すると思います(今度は、このコードを吐き出す部分だけは、動作確認しました)。 $jscountと、JavaScriptで配列番号の指定に使う[x]とがくっついていたので、Perlの配列@jscountの[x]番目の項目(空白でしょうね)を書き出していたようです。 大変失礼しました。

KODAMAR
質問者

お礼

回答ありがとうございます。 if (!document.NYUURYOKU.SYURUI${jscount}[0].checked && !document.NYUURYOKU.SYURUI${jscount}[1].checked){ のように変更してみたのですが、 「種類1を選択してください」が2回出て、入力が終了してないのに、入力確認画面にいってしまいます。 どこを直したらいいのでしょうか? 何度もすいませんがよろしくお願いします。

KODAMAR
質問者

補足

すいません、無事できました!! ありがとうございました。

その他の回答 (1)

noname#199778
noname#199778
回答No.1

Perlの記述と、JavaScriptの記述とがごっちゃになっていませんか? JavaScriptはJavaScript、PerlはPerlとして、きちんと分けて書かないとうまくないと思いますよ。 CGIのファイルで、チェック用のJavaScriptを吐き出す部分を print "<script type=\"text/javascript\"><\!--\n"; print "function radioCheck(){\n"; for ($jscount=1; $jscount<$FORM{'COUNT'}+1; $jscount++){ print <<"JSCHECK"; if (\!document.NYUURYOKU.SYURUI$jscount[0].checked \&\& \!document.NYUURYOKU.SYURUI$jscount[1].checked){ alert(\'種類$jscountを選択してください\')\; return false\; } JSCHECK } print "}\n//--></script>\n"; このような感じにしてみてはいかがでしょうか。 JavaScriptでは、「!document.Form.Radio[x].checked」でそのラジオボタンがチェックされていないことが拾えますので、上記の例ではそれを併記した「(!document.Form.Radio[0].checked && !document.Form.Radio[1].checked)」(Formの中のRadio[0]がチェックされておらず、かつFormの中のRadio[1]がチェックされていない)という条件で二つのラジオボタンがチェックされていないかどうかを拾うような形になっています。 これをPerlで順次吐き出させるようにすれば良いのではないかと思います。 例示したPerlスクリプトは動作確認していませんので、正常に動くかどうかわかりません。 JavaScriptの方は、一応動作してくれると思います。 参考になれば… 間違っていたら、ごめんなさい。

KODAMAR
質問者

お礼

回答ありがとうございます。 やってみたのですが、HTMLをみると if (!document.NYUURYOKU.SYURUI.checked && !document.NYUURYOKU.SYURUI.checked){ となってしまいます。 どうしたらいいのでしょうか?

関連するQ&A

  • 選択肢によってラジオボタンを押せなくする(無効にする)

    2.7.2.の質問があって、ラジオボタンの選択肢(1~5まで)によって、 1を選択したら、2.7.2.1のみ選択、その他はラジオボタン押せなくする 、2を選択すると、2.7.2.2のみ選択、その他はラジオボタン押せなくする 、3を選択すると、2.7.2.3のみ選択、その他はラジオボタン押せなくする 4、5を選択すると、2.7.2.1、2.7.2.2、2.7.2.3、すべてを押せなくして、submitボタンを押して次へという処理をしたいのですが、下記のプログラムではまったく動作しません。 どこが悪いのでしょうか?お分かりの方教えていただけませんか? <script language="javascript"> <!-- function check(){ if(document.form1.BQ20[0].checked == true) { document.form1.BQ201.disabled = false; document.form1.BQ201.bgColor='#FFFFFF'; }else if(document.form1.BQ20[1].checked == true) { document.form1.BQ202.disabled = false; document.form1.BQ202.bgColor='#D4D0C8'; }else if(document.form1.BQ20[2].checked == true) { document.form1.BQ203.disabled = false; document.form1.BQ203.bgColor='#D4D0C8'; }else{ document.form1.BQ201.disabled = true; document.form1.BQ201.bgColor='#FFFFFF'; document.form1.BQ202.disabled = true; document.form1.BQ202.bgColor='#FFFFFF'; document.form1.BQ203.disabled = true; document.form1.BQ203.bgColor='#FFFFFF'; } } // --> </script> 以下省略

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

    Q1とQ2の2問があり、ラジオボタンで回答を選択するようにしていますが、 ラジオボタンを選択しなかった場合、選択を促すようメッセージを表示させるようJavaScriptで以下のように作成してみましたがうまくいきません。 Q1とQ2の両方を選択しなかった場合、「Q1が選択されていません」とメッセージが表示されますが、Q1だけを選択してQ2を選択しなかった場合はメッセージが表示されません。 いろいろ調べてみたのですが、function checkの使い方に問題があるのでしょうか? function check(){ var flag = 0; if(document.form1.Q1.length) { flag = 1; var i; for(i = 0; i < document.form1.Q1.length; i ++){ if(document.form1.Q1[i].checked){ flag = 0; break; } } } if(flag){ window.alert('Q1が選択されていません'); return false; } else{ return true; } var flag = 0; if(document.form1.Q2.length) { flag = 1; var i; for(i = 0; i < document.form1.Q2.length; i ++){ if(document.form1.Q2[i].checked){ flag = 0; break; } } } if(flag){ window.alert('Q2が選択されていません'); return false; } else{ return true; } }

  • ラジオボタンとセレクトボックスの選択チェック

    ラジオボタン、セレクトボタンの選択チェックをしたいのですが 同時にチェックする場合どうすればよいのでしょうか。 失敗策ですが、参考までに↓ function check() { var flag=0; if( document.form1.seibetu.length){ flag=1; var i; for(i=0; i<document.form1.seibetu.length; i++){ if(document.form1.seibetu[i].checked){ flag=0; break; } } } else{ if(!document.form1.seibetu.checked){ flag=1; } } if(flag){ window.alert('性別が選択されていません'); return false; } else{ return true; } if(document.form1.nenrei.options[document.form1.nenrei.selectedIndex]. value==""){ flag=1; } if(flag){ window.alert('年齢が選択されていません'); return false; } else{return true; } }

  • javascriptでラジオボタンのが変更できない

    javascriptを勉強中なのですが 練習で下記のような麻雀の計算をしてくれるサイトを作ってみましたがうまく反応しません。 http://tegarude.sakura.ne.jp/mafu/form.html できない点は、例えば、ロンの項目で面前のチェックの時、ツモの項目にいいえが入りますが、 その後、ツモの項目で平和のチェックをいれようとしてもチェックが入りません。 javascriptで操作するようにしたのですがどうもうまくいきません。 単純なこと簡単なことなのかもしれませんが どなたかご教授願えませんでしょうか? ソースコードが長いのでjavascriptの記述のみ載せています。 サンプルのURLを参考にして下さい。 function on(){ //ロン・ツモ・待ち・雀頭の値を取得 function mjk01(m1,m2){ for (j=0; j<m1.length; j++){ if(m1[j].checked){ m2.innerHTML=m1[j].value; } } } mjk01(document.form1.radio2,document.getElementById("a00")); mjk01(document.form1.radio3,document.getElementById("a01")); mjk01(document.form1.radio4,document.getElementById("a02")); mjk01(document.form1.radio5,document.getElementById("a03")); //formプロパティの省略 formt=document.form1; //ロン項目設定 if(formt.radio2[0].checked){ formt.radio3[3].checked=true; formt.radio7[0].checked=true; formt.radio9[0].checked=true; formt.radio11[0].checked=true; formt.radio13[0].checked=true; } if(formt.radio2[1].checked){ formt.radio3[3].checked=true; formt.radio4[0].checked=true; formt.radio5[2].checked=true; formt.radio6[0].checked=true; formt.radio8[0].checked=true; formt.radio10[0].checked=true; formt.radio12[0].checked=true; } if(formt.radio2[2].checked){ formt.radio3[3].checked=true; } //ツモ項目設定 if(formt.radio3[0].checked){ formt.radio2[3].checked=true; formt.radio4[0].checked=true; formt.radio5[2].checked=true; formt.radio6[0].checked=true; formt.radio8[0].checked=true; formt.radio10[0].checked=true; formt.radio12[0].checked=true; } if(formt.radio3[1].checked){ formt.radio2[3].checked=true; formt.radio4[0].checked=true; formt.radio5[2].checked=true; } if(formt.radio3[2].checked){ formt.radio2[3].checked=true; } //面子の設定 function mentsu(m1,m2,m3){ if(m1[0].checked){ m2[1].value=4; m2[2].value=16; m2[3].value=8; m2[4].value=32; } if(m1[1].checked){ m2[1].value=2; m2[2].value=8; m2[3].value=4; m2[4].value=16; } for(i=0; i<m2.length; i++){ if(m2[i].checked){ m3.innerHTML=m2[i].value; } } } mentsu(document.form1.radio7,document.form1.radio6,document.getElementById("a04")); mentsu(document.form1.radio9,document.form1.radio8,document.getElementById("a05")); mentsu(document.form1.radio11,document.form1.radio10,document.getElementById("a06")); mentsu(document.form1.radio13,document.form1.radio12,document.getElementById("a07")); //小計をすべて数字に変換 num0=document.getElementById("a00").innerHTML; num1=document.getElementById("a01").innerHTML; num2=document.getElementById("a02").innerHTML; num3=document.getElementById("a03").innerHTML; num4=document.getElementById("a04").innerHTML; num5=document.getElementById("a05").innerHTML; num6=document.getElementById("a06").innerHTML; num7=document.getElementById("a07").innerHTML; num0 = parseFloat(num0); num1 = parseFloat(num1); num2 = parseFloat(num2); num3 = parseFloat(num3); num4 = parseFloat(num4); num5 = parseFloat(num5); num6 = parseFloat(num6); num7 = parseFloat(num7); //総合計の算出 document.getElementById("total").innerHTML=num0+num1+num2+num3+num4+num5+num6+num7; }

  • radioボタンの値の取得の仕方?

    こんにちは,よろしくお願いします。 ラジオボタンの値でテキストフィールドのような要素をdisabledにしようと考えています。 そこで <input name="AAA" type="radio" id="AAA_0" value="0" checked="checked" onclick="xxx()"/>選択肢A <input name="AAA" type="radio" id="AAA_1" value="1" onclick="xxx()"/>選択肢B とし,javascriptのxxx functionの中では, if(document.getElementById("AAA").value == 0){ document.getElementById("BBB").disabled = true; }else if(document.getElementById("AAA").value == 1){ document.getElementById("BBB").disabled = false; } } としてみたところ,いつも document.getElementById("AAA").value の値が0のままでいくら選択肢Bをクリックしても切り替わりません。 一体何が悪いのでしょうか。教えてください。よろしくお願い申し上げます。

  • フォーム内のラジオボタンの数の取得

    flag = 0; for(i=0;i<document.frm.re_id.length;i++){   if (document.frm.re_id[i].checked){     flag = 1;   } } if (!flag){     alert('ラジオボタンのいずれかをご選択ください');   return false; } return true; 今はこのように記述してtrueの時にsubmitが実行されるようにしています。 ラジオボタンが2つ以上ある時はdocument.frm.re_id.lengthがきちんとラジオボタンの数を返してくるんですが、ラジオボタンが1つの場合undefindとなってしまいます。 document.フォーム名.ラジオ名.lengthはラジオボタンが1つの場合は使えないのですか?

  • チェックボックスのチェックについて

    チェックボックスが2つあります。 一つが選択されたらテキストボックスが入力可能にしてあります。 Aを選択すると、Bのチェックが外れる、反対の場合も同じようにしたいのですが、下記のように書きましたがうまくいきません。 解決方法が分かられる方、教えて下さい。 *********************************************** function Change(){ if(document.myForm.chkB.checked ==true{ document.myForm.TxtA.disabled = true; document.myForm.chkA.checked = false; } else { document.myForm.TxtA.disabled = false; document.myForm.chkA.checked = true; } } ***********************************************

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

    Visual Basic 2010 Express windows7 Pro dmyが何であるかでラジオボタンのチェックを入れたいのですが、 下記の場合はそれぞれの値でチェックが入りません。 dmy = My.Computer.FileSystem.ReadAllText("dmy.txt") Select Case dmy Case "aaa" RadioButton4.Checked = True Case "bbb" RadioButton6.Checked = True Case "ccc" RadioButton7.Checked = True End Select 下記の場合、CheckBox7にチェックが入ると、 RadioButton1はオフになったので、 Trueにするだけで出来ると思ったのですが、変わりませんでした。 If CheckBox7.Checked Then RadioButton1.Checked = False End If

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

    複数のラジオボタンが全て選択されているかどうかのチェックの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"> ---------------------------------------

  • 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」のテーブルが選択したラジオボタンによってどちらかひとつ表示される、という風にしたいのですが、教えていただけないでしょうか?