- ベストアンサー
チェックボックスとテキストフィールドを連動させて、Javascriptでチェックをかけたい
このようなアンケートがあるとします。 //アンケートスタート ●Q1 あなたはJavascriptを使いこなしていますか？ ラジオボタン回答1 使いこなしている ラジオボタン回答2 あまり使いこなしているといえない ラジオボタン回答3 ぜんぜん使いこなしていない ●Q2 Q1で「あまり使いこなしているといえない」 「ぜんぜん使いこなしていない」と回答した方のみお答えください。 その理由はどのようなものですか？ チェックボックス回答1 むずかしい チェックボックス回答2 わかりにくい チェックボックス回答3 そのほか テキストフィールド そのほかの理由（ ） 【送信ボタン】 //アンケートエンド ■上のアンケートでJavascriptを使用して 次のことをしたいのですが、教えてください。 1.Q1の2と3にチェックがあるのに、 Q2に未回答のままフォームデータを送信しようとした場合に、 アラートを表示させたい 2.Q2で3を選んだ人にもかかわらず、 そのほかの理由テキストフィールドに未記入のまま フォームデータを送信しようとした場合、 アラートを表示させたい よろしくお願いします。
- fishpaw
- お礼率52% (21/40)
- JavaScript
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- you111111
- ベストアンサー率45% (20/44)
>チェックはしてくれるのですが、そのまま送信のダイアログボックスがでてきてしまいます…。入力画面に戻し、その回答欄にフォーカスさせたいです！ 関数自体はできている様なので、送信ボタンのonclickイベントで onclick="javascript:SubmitCheck()" とすればよいのでは？・・・ >あと、Q2は複数回答できるようにしたいのですが、 >ラジオボタンのままで大丈夫なのでしょうか？ ラジオボタンの名前を変えればできます。 <input type="radio" name="rad2_1">2-1 <input type="radio" name="rad2_2">2-2 <input type="radio" name="rad2_3">2-3
お礼
ありがとうございました。
- mousengoke
- ベストアンサー率50% (197/388)
<html> <head> <script type="text/javascript"> <!-- function checans(thisform){ var quesumu; quesumu = checradioon(thisform); if(!quesumu){ alert("Q1に答えてください。") return false; } if(thisform.ques1[0].checked){ return true; } else{ quesumu = checradioon(thisform.ques2); if(!quesumu){ alert("Q2に答えてください。"); return false; } } if(thisform.ques2[2].checked){ if(thisform.q2else.value==""){ alert("テキスト欄に理由を書いてください。"); return false; } } return true; } function checradioon(thisradio){ var countradio = thisradio.length; for(i = 0;i < countradio;i++){ if(thisradio[i].checked){ return true; } } return false; } //--> </script> </head> <body> <form onSubmit="return checans(this)" action="送信先のURL"> <p>●Q1 あなたはJavascriptを使いこなしていますか？ </p> <p> <label for="q1a1"> <input type="radio" name="ques1" id= "q1a1" value="q1a1">使いこなしている </label> <label for="q1a2"> <input type="radio" name="ques1" id= "q1a2" value="q1a2">あまり使いこなしているといえない </label> <label for="q1a3"> <input type="radio" name="ques1" id= "q1a3" value="q1a3">ぜんぜん使いこなしていない </label> </p> <p>●Q2 Q1で「あまり使いこなしているといえない」「ぜんぜん使いこなしていない」と回答した方のみお答えください。 その理由はどのようなものですか？ </p> <p> <label for="q2a1"> <input type="radio" name="ques2" id= "q2a1" value="q2a1">むずかしい </label> <label for="q2a2"> <input type="radio" name="ques2" id= "q2a2" value="q2a2">わかりにくい </label> <label for="q2a3"> <input type="radio" name="ques2" id= "q2a3" value="q2a3">そのほか </label> </p> <input type="text" name="q2else"> <input type="submit" value="送信"> </form> </body> </html> ちなみに当たり前の話ですがアンケートに答える人がjavascriptを無効にしてあったり使えない環境の場合エラーなしで投稿できてしまいます。
補足
ありがとうございます。 すでにあるfunction SubmitCheck()という送信時のチェックのためのプログラムに上のチェック機能を追加したいのですが、どのように書き直せばいいのでしょうか…。 ちなみにそのfunctionはつぎのようになっています。 function SubmitCheck() { var bchecked = 0; //これは入力中のチェックです if(allHankakuCheck()){ return false; } if(allNumericCheck()){ //これも入力中のチェックです return false; } if(ua == 0 || ua == 2){ if ( document.regs.media.selectedIndex == 0 ){ alert("どのようにしてこのページをしりましたか？"); return false; } if ( !EmptyCheck(document.regs.name.value,"あなたの名前を記入してください") ) { document.regs.name.focus(); return false; } 【中略】 return true; } あと、Q2は複数選択できるようにしたいのですが、 単純にcheckboxに変更するだけじゃだめですよね？
- you111111
- ベストアンサー率45% (20/44)
こんな感じ？ <html> <head> <script language="javascript"> <!-- function ChkVal() { var blnChk = false; if(document.all.item("rad1",1).checked || document.all.item("rad1",2).checked) { for (i=0; i<document.all.item("rad2").length; i++) { if(document.all.item("rad2",i).checked) { blnChk = true; } } if(!blnChk) { alert("Ｑ２未選択！"); } else { if(document.all.item("rad2",2).checked && !frm1.txt.value) { alert("txt1未入力！"); } } } } //--> </script> </head> <body> <form name="frm1" method="post"> Ｑ１<br> <input type="radio" name="rad1" value="1">1-1 <br> <input type="radio" name="rad1" value="2">1-2 <br> <input type="radio" name="rad1" value="3">1-3 <p> Ｑ２<br> <input type="radio" name="rad2" value="4">2-1 <br> <input type="radio" name="rad2" value="5">2-2 <br> <input type="radio" name="rad2" value="6">2-3 <br> txt1<input type="text" name="txt"> <br> <input type="button" name="btn1" value="Check!" onclick="ChkVal();"> </form> </body> </html>
補足
ありがとうございます。 チェックはしてくれるのですが、そのまま送信のダイアログボックスがでてきてしまいます…。入力画面に戻し、その回答欄にフォーカスさせたいです！ あと、Q2は複数回答できるようにしたいのですが、 ラジオボタンのままで大丈夫なのでしょうか？ すみません。ご教示ください。
お礼
ありがとうございます。 本日、所用のためデータをいじることができませんので、実際データに入れ込んでテストしてみてから、あれば、改めて質問などさせていただければと思います。すみません。