• 締切済み

JavaScriptに詳しい方居ますか?

YESの数で診断するXX度チェックについてですが、 JavaScript は詳しくありません。 下記のものは、あるHPで見つけたものですが、 チェック項目を増やしたり出来ないものでしょうか? 出来るのであれば修正してもらえませんか 現在は5項目ですが、10項目にしたいと思っています 診断内容についても載っていたのをコピーして載せただけなので、 変更しようと思っています。 詳しい方、宜しくお願い致します。 <script language="JavaScript"><!-- function myCheck(){ myCnt=0; // チェックした数 for (i=0; i<document.myForm.length-1; i++){ // チェックボックスの数分ループ if (document.myForm.elements[i].checked == true){ // チェックはオンか? myCnt++; // チェック数 加算 } } if ( myCnt == 0 ) myMess="正常"; // チェックは 無し(ゼロ) else if ( myCnt <= 2 ) myMess="ちょヤバ"; // チェックは 1以上2以下 else if ( myCnt <= 4 ) myMess="危険気味"; // チェックは 3以上4以下 else myMess="完璧に危険"; // チェックは 全部(5) myComment = "危険度チェック 診断結果\n\nあなたは、"+myMess+"です!"; alert (myComment); } // --></script> <form name="myForm"> <input type="checkbox">たばこは1日20本以上吸う<br> <input type="checkbox">お酒を飲むと性格が変わる<br> <input type="checkbox">車を運転すると性格が変わる<br> <input type="checkbox">刃物を手にすると心がなごむ<br> <input type="checkbox">ピストルを所持している<br> <input type="button" onclick="myCheck()" value="診断"><br> </form>

みんなの回答

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

もとのソースは、「とりえあえず動けばいい」的な書き方をしてます。 for(・・・)のところでlengthから1をひいてますが、これは 最後のボタンをチェックしないための姑息な手法でお勧めできません。 チェックボックスの数をカウントするのであれば、タイプ(type)を チェックすると言うのがあるべき姿でしょう。 以下のようにするとチェックボックスはいくらでも増やせますので、 ためしてみてください。 判定はelse if・・・のところに小さい順に判定結果を 書いていけばよいでしょう <script language="JavaScript"> function myCheck(f){ var myCnt=0; for (var i=0; i<f.length; i++){ if (f[i].type=="checkbox" && f[i].checked) myCnt++; } if ( myCnt == 0 ) myMess="正常"; else if ( myCnt <= 2 ) myMess="ちょヤバ"; else if ( myCnt <= 4 ) myMess="危険気味"; else myMess="完璧に危険"; var myComment = "危険度チェック 診断結果\n\nあなたは、"+myMess+"です!"; alert (myComment); } </script> <form name="myForm"> <input type="checkbox">たばこは1日20本以上吸う<br> <input type="checkbox">お酒を飲むと性格が変わる<br> <input type="checkbox">車を運転すると性格が変わる<br> <input type="checkbox">刃物を手にすると心がなごむ<br> <input type="checkbox">ピストルを所持している<br> <input type="button" onclick="myCheck(this.form)" value="診断"><br> </form>

  • uuyn2006
  • ベストアンサー率50% (24/48)
回答No.2

こんにちわ^^ ここで説明するのは凄く難しいのですが・・・ 『for (i=0; i<document.myForm.length-1; i++){ // チェックボックスの数分ループ』 と言う部分ですが、HTMLの中のFormについてJAVAScriptでチェックする部分です。 「document.myForm.length」ですが、documentはHTMLで言うBODYに当たります。その中の「myForm」と言う名前のところのlength(長さ)を参照しています。 つまり、「チェックボックスの個数がいくつあるか」を自動でチェックしています。 と言うことは、チェックボックス自体を増やせば、勝手に、チェック数も増えるので、もし、10個のチェックボックスを作りたければ 『<form name="myForm"> <input type="checkbox">たばこは1日20本以上吸う<br> <input type="checkbox">お酒を飲むと性格が変わる<br> <input type="checkbox">車を運転すると性格が変わる<br> <input type="checkbox">刃物を手にすると心がなごむ<br> <input type="checkbox">ピストルを所持している<br> <input type="checkbox">CHECK6<br> <input type="checkbox">CHECK7<br> <input type="checkbox">CHECK8<br> <input type="button" onclick="myCheck()" value="診断"><br> </form>』 と言うふうに、FORMのなかに増やしてあげればOKです。 また、『 if ( myCnt == 0 ) myMess="正常"; // チェックは 無し(ゼロ) else if ( myCnt <= 2 ) myMess="ちょヤバ"; // チェックは 1以上2以下 else if ( myCnt <= 4 ) myMess="危険気味"; // チェックは 3以上4以下 else myMess="完璧に危険"; // チェックは 全部(5) myComment = "危険度チェック 診断結果\n\nあなたは、"+myMess+"です!"; alert (myComment); }』 この部分は、「チェックボックスにいくつチェックが入っているかによってだすコメントを変えている」所です。 IFと言うのは「もし」と言う意味ですが、「if(myCnt == 0)」となった場合、「もしmyCntが0に等しいならば」と言う意味になります。(myCntは変数。変数とは数学で言うXやYに当たります) なので、それに続く、else if(myCnt <= 2)の部分を変えてあげれば判断文も増やせます。 if ( myCnt == 0 ) myMess="正常"; // チェックは 無し(ゼロ) else if ( myCnt <= 2 ) myMess="ちょヤバ"; // チェックは 1以上2以下 else if ( myCnt <= 4 ) myMess="危険気味"; // チェックは 3以上4以下 else if ( myCnt <= 6 ) myMess="めちゃくちゃ危険"; else myMess="完璧に危険"; // チェックは 全部(5) myComment = "危険度チェック 診断結果\n\nあなたは、"+myMess+"です!"; alert (myComment); } と言う感じです JAVAScriptについて詳しいことは本を読まれてはいかがでしょう。 2000円ぐらいから本屋さんに並んでるかと思いますので。

回答No.1

>チェック項目を増やしたり出来ないものでしょうか? できます。診断条件も変えないでいいのなら、項目を増やすだけです。 診断条件を変えるとしても、数字を調整するだけです。 でも残念ながら、JavaScriptに詳しいとはいえないので詳細は遠慮させていただきます。

関連するQ&A

  • Javascript ポップアップウィンドウでのデータの受け渡し

    よくある○○度チェックみたいなものを作っているのですが、 項目が10個程あって、 「チェックが0個~4個のあなたは、△△△!!」 「チェックが5個~7個のあなたは、◇◇◇!!」 「チェックが8個~10個のあなたは、◎◎◎!!」 という流れなのです。 で、その3パターンの結果ごとに異なる HTMLをポップアップウィンドウで表示させたいのです。 たいていは次のページに結果を表示させるパターンですが、ここをポップアップ表示させたいのです。 しかも3つそれぞれのHTMLに。 <script language="JavaScript"> function myCheck(){ myCnt=0 // チェックした数 for (i=0; i<document.myForm.length-1; i++){ // チェックボックスの数分ループ if (document.myForm.elements[i].checked == true){ // チェックはオンか? myCnt++ // チェック数 加算 } } if ( myCnt <= 3 ){ // チェックは 無し(ゼロ) myUrl = "check_1.html"; } else if ( myCnt <= 5 ){ // チェックは 1以上6以下 myUrl = "check_2.html"; } else if ( myCnt > 5 ){ // チェックは 1以上6以下 myUrl = "check_3.html"; } funMsgUrl(myUrl) } function funMsgUrl(url){ location.href = url } </script>  ・  ・  ・ <form name="myForm"> <input name="checkbox1" type="checkbox">項目<br> <input name="checkbox2" type="checkbox">項目<br> <input name="checkbox3" type="checkbox">項目<br>  ・  ・  ・ <input name="checkbox9" type="checkbox">項目<br> <input name="checkbox10" type="checkbox">項目<br> </form> <input type="button" onClick="myCheck(); return false;" value="チェック"> すみませんが、助言をお願いいたします。

  • JavaScriptでcheckboxの入力個数制限

    以下のようなチェックボックスがあります。 3つ以上チェックできないようにしたいのですが、JavaScriptで可能でしょうか? <FORM method=POST action="aaa.cgi" name="FORM1"> <input type="checkbox" name="Q1" value="1">1<br> <input type="checkbox" name="Q2" value="1">2<br> <input type="checkbox" name="Q3" value="1">3<br> <input type="checkbox" name="Q4" value="1">4<br> <input type="checkbox" name="Q5" value="1">5<br> </form>

  • javascriptのsubmitを使ってデータをpost送信したい。

    javascriptのsubmitを使ってデータをpost送信したい。 aaa.phpというファイルに複数のチェックボックスがあり、リンクをクリックしたときに チェックされた値のみをbbb.phpへ引き渡したいです。 自分なりに書いてみましたが、bbb.phpへは遷移するものの、データが表示されません。 document.form1.method部分をGETにすると、データは表示されますが、POSTにすると うまく引渡しができません。 的外れな書き方をしているかもしれませんが、どなたかご教授いただけませんでしょうか? よろしくお願いいたします。 【追記】 チェックボックスの数は固定ではなく変動があり、値も実際はランダムです。 デザインの都合上どうしてもaタグでしか記述が出来ません。 ------------------------------------------------------------------------------ 【aaa.php】 <script language="JavaScript"> <!-- function mailform() {  var i = 0;  var chkvalue = "";  var count = 0;  var chk = document.getElementsByName('no');  for(i=0; i<chk.length; i++) {   if (chk[i].checked == true) {    chkvalue += chk[i].value;    count++;   }  }  if(count == 0) {   alert("チェックされていません。");   return false;  } else {   document.form1.action = "./bbb.php";   document.form1.method="post";   document.form1.submit();  } } //--> </script> <a href="#" onClick="send()">bbb.phpへ遷移する</a> <form name="form1">  <input type="checkbox" name="no" value="1"><br />  <input type="checkbox" name="no" value="2"><br />  <input type="checkbox" name="no" value="3"><br />  <input type="checkbox" name="no" value="4"><br /> </form> 【bbb.php】 var_dump($_POST["no"]);

  • javascriptでチェックボックスの選択状況をチェックする方法につ

    javascriptでチェックボックスの選択状況をチェックする方法について質問です。 チェックボックスを <input type="checkbox" name="chk[]" value="1"> <input type="checkbox" name="chk[]" value="2"> のようにした場合、チェックボックスが1か所以上選択されているかどうかは、 var count = 0; for (var i=0;i<document.myform.elements['chk[]'].length;i++){ if(document.myform.elements['chk[]'][i].checked){ count++; } } if(count==0){ window.alert("チェックしてください!"); } のようにすればチェック可能ですが、inputタグで <input type="checkbox" name="chk1[]" value="1"> <input type="checkbox" name="chk1[]" value="2"> <input type="checkbox" name="chk2[]" value="A"> <input type="checkbox" name="chk2[]" value="B"> のように「name」の配列名が変化する場合はどのようにすればチェック可能でしょうか?

  • このJavaScriptはなんか早い・・・

    <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 6.5.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>タイマー</TITLE> </head> <body> <script language="JavaScript"><!-- myCnt = 0; myTim = 0; function myGo(){ mySelect = document.myForm.myMenu.selectedIndex; myCnt = eval(document.myForm.myMenu.options[mySelect].value); myTim = setInterval("myTimer()",1000); } function myTimer(){ myCnt = myCnt-1; document.myForm.myFormSec.value = myCnt + " 秒"; if (myCnt == 0){ clearInterval(myTim); alert("制限時間を終了しました。"); } } // --></script> <CENTER> <form name="myForm"><select name="myMenu" size="1"> <option value="180">時間制限は? </option> <option value="600">10分 </option> <option value="300">5分 </option> </select> <input type="button" value="GO!" onclick="myGo()">                            あと<input type="text" size="15" name="myFormSec"> です。</form> </CENTER> <form> <center><input type="button" value="閉じる" onclick="window.close()"> </center> </form> </body> </html> 上のものを実行させると、なぜかスピードが早くなってしまいます。 どうすればいいのでしょう。 お願いします。

  • 【心理テスト作成】JavaScriptでページが表示されません

    チェックボックスを作り、 チェックが○個で「A」のページ、 チェックが○個で「B」のページ、 といったような簡易的な心理テストを作成したいと思い、 下記の方法を教えていただいたのですが、 正常に表示がされません(泣) 「送信」のボタンを押しても何もアクションが起こらないです… 私のPCに問題があるのでしょうか?? 申し訳ありません、 初心者でよく分かりませんのでよろしくお願い致します。 ▼ココからです▼ <html> <head> <title>Sample</title> <script language="JavaScript"> <!-- function jump() { count = 0; for (var i=0;i<document.sampleform.elements["check"].length;i++){ if ((document.sampleform.elements[i].name == "check") && (document.sampleform.elements[i].checked)) { count ++; } } if (count == 0) { // 一つもチェックされていない場合 location.href("​http://www.yahoo.co.jp");​ } else if (count <= 3) { // チェックが3個以下の場合 location.href("​http://www.google.co.jp");​ } else { // チェックが4個以上の場合 location.href("​http://www.msn.co.jp");​ } } //--> </script> </head> <body> <form name="sampleform"> <input type="checkbox" name="check" value="A"> A<br> <input type="checkbox" name="check" value="B"> B<br> <input type="checkbox" name="check" value="C"> C<br> <input type="checkbox" name="check" value="D"> D<br> <input type="checkbox" name="check" value="E"> E<br> <input type="button" value="送信" onclick="jump();"> </form> </body> </html>

  • チェックボックスの連動でJavaScriptの記述を短くしたい。

    【あ】、【い】という項目があり、それぞれの項目内にA、Bというチェック項目があります。 【あ】項目のAにチェックを入れると【い】のAにもチェックが入るように作りました。 以下のソースでもなんとか動くのですが、【あ】、【い】という項目が増える事とA、Bというチェック項目が増えることが判り、JavaScriptのソースを少しでも短くしたいのですが、なにか好い方法がございましたらお教え頂ければ幸です。 /************参考ソースです*****************/ <html> <head> <title>無題ドキュメント</title> <script> function check_a(){ if(document.form.a.checked==true) { document.form.a.checked=true; document.form.b.checked=false; document.form.aa.checked=true; document.form.bb.checked=false; } } function check_b(){ if(document.form.b.checked==true) { document.form.a.checked=false; document.form.b.checked=true; document.form.aa.checked=false; document.form.bb.checked=true; } } function check_aa(){ if(document.form.aa.checked==true) { document.form.a.checked=true; document.form.b.checked=false; document.form.aa.checked=true; document.form.bb.checked=false; } } function check_bb(){ if(document.form.bb.checked==true) { document.form.a.checked=false; document.form.b.checked=true; document.form.aa.checked=false; document.form.bb.checked=true; } } </script> </head> <body> <form name="form"> 項目【あ】 <input type="checkbox" name="a" onclick="check_a()"> A<BR> <input type="checkbox" name="b" onclick="check_b()"> B<BR> <br /> 項目【い】 <input type="checkbox" name="aa" onclick="check_aa()"> A<BR> <input type="checkbox" name="bb" onclick="check_bb()"> B<BR> <br /> </form> </body> </html> /*************************/ 何卒、宜しくお願い申上げます。m(_ _)m

  • javascript checkbox

    完全に初心者です。。 下記のスクリプトをもとに、 ■チェックAをチェックしたら全てチェックされる ■またチェックAをチェックしたら全て外れる ようにしたいです。。 でも何がダメか分かりません。。 一部を書くのではなく出来ればスクリプト全ていただけたらと思います。 あともし宜しければチェックAをチェックしたら、1~6をチェックできないようにもしたいです。。 ご教授よろしくお願いします。。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE></TITLE> <SCRIPT language="JavaScript"> function check(){ for(i=1; i<7; i++){ document.form1.elements[ch[i]].checked = true; } } </SCRIPT> </HEAD> <BODY> 全てのチェックボックスをチェック/解除 <FORM name="form1"> <p><INPUT type="checkbox" id="ch" onclick="check()">チェックA</p>   <INPUT type="checkbox" id="ch1">チェック1   <INPUT type="checkbox" id="ch2">チェック2   <INPUT type="checkbox" id="ch3">チェック3<BR><BR>   <INPUT type="checkbox" id="ch4">チェック4   <INPUT type="checkbox" id="ch5">チェック5   <INPUT type="checkbox" id="ch6">チェック6<BR><BR>   <BR> </FORM> </BODY> </HTML>

  • チェックボックスで得たデータを送信する場合

    CGIでデータの受け渡しを行い、決められたアドレスへ結果を送信するアンケートをつくっています。以前、チェックボックスで複数回答可とした場合の制限のかけ方をJavaScriptを用いた方法で教えてもらいましたが、これを利用して得た値をCGIで受け取りたいのですが、どうやって設定すればいいのでしょうか。「name」がそれぞれ名前が違う所でつまずいています。また<form method=post action="***.cgi">~</form>と項目全体をくくればいいのでしょうか?参考までに以下のHTMLを付記いたします。 <html> <head> <title>5個のうち3個しかチェックできないようにする</title> <script Language="JavaScript"><!-- function check(n) { fOBJ = document.myFORM; count = 0; for (i=1; i<=5; i++) if (fOBJ["CB"+i].checked) count++; if (count > 2) { alert("3個以上チェックできません"); fOBJ["CB"+n].checked = false; } } // --></script> </head> <body> <form name="myFORM"> <input type="checkbox" name="CB1" onClick="check(1)">チェック1<br> <input type="checkbox" name="CB2" onClick="check(2)">チェック2<br> <input type="checkbox" name="CB3" onClick="check(3)">チェック3<br> <input type="checkbox" name="CB4" onClick="check(4)">チェック4<br> <input type="checkbox" name="CB5" onClick="check(5)">チェック5<br> </form> </body> </html>

    • ベストアンサー
    • CGI
  • checkboxの選択数制限と排他処理について

    javascript初心者です。よろしくお願い致します。現在チェックボックスを使用したクイズサイトを作成しており、回答が5つの中から正しいものをチェックし送信するというものです。 その中で、正解数(今回は2つ)以上にチェックをした時に最初にチェックした方のチェックボックスのチェックが外れるという仕組みを組み込む事になりました。 選択数に制限をかけることや排他処理(ラジオボタン)は理解できるのですが、上記の実現方法がどうしても分からず質問させていただきました。 どうかよろしくお願い致します。 <html> <head> <script type="text/javascript"> function check(f,o,m){ var c = i = 0, b = f.elements; for (i; i < b.length; i++) if(b[i].type&&b[i].type=='checkbox'&&b[i].checked&&b[i].parentNode.id==o) c++; for (i = 0; i < b.length; i++) if(b[i].type&&b[i].type=='checkbox'&&!b[i].checked&&b[i].parentNode.id==o) b[i-2].checked=false;// これだと2つ前ではなく2番目のチェックボックスが排他になります。 } </script> </head> <body> <form action="#" id="sampleform" onclick="check(this,'options',2);"> <fieldset id="options"><input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> </fieldset> </form> </body> </html>

専門家に質問してみよう