締切済み

JavaScriptで選択問題作成(3)

2016/05/19 15:20

お世話になります。以前ここで質問をさせてもらった件で不具合が出来たのでまた質問をさせてもらいます。以前のスレはこれです。 http://okwave.jp/qa/q9170301.html ここで教えてもらった通りに作成していたのですが、以下のような感じです。 <!DOCTYPE html> 　<meta charset="utf-8"> <style> fieldset.q ul { list-style: none; } </style> <body> <h1>問題</h1> <fieldset class="q"> 　<legend>Q1. 九州の県は次のうちどれですか?</legend> 　<ul> 　　<li><label><input type="checkbox" name="q1" value="true">福岡</label> 　　<li><label><input type="checkbox" name="q1" value="false">岡山</label> 　　<li><label><input type="checkbox" name="q1" value="false">山形</label> 　　<li><label><input type="checkbox" name="q1" value="true">長崎</label> 　　<li><label><input type="checkbox" name="q1" value="true">熊本</label> 　　<li><label><input type="checkbox" name="q1" value="false">新潟</label> 　　<li><label><input type="checkbox" name="q1" value="false">山口</label> 　　<li><label><input type="checkbox" name="q1" value="true">鹿児島</label> 　　<li><label><input type="checkbox" name="q1" value="true">佐賀</label> 　　<li><label><input type="checkbox" name="q1" value="false">青森</label> 　　<li><label><input type="checkbox" name="q1" value="true">宮崎</label> 　　<li><label><input type="checkbox" name="q1" value="false">千葉</label> 　</ul> 　<input type="button" value="解答"> 　<input type="hidden" name="q1" value=""> </fieldset> <p> 　<input type="button" value="リセット"> 　<input type="button" value="終了"> <script> function check (e) { 　var fieldset = e.parentNode; 　var seikai = fieldset.querySelectorAll ('input[type="checkbox"][value="true"]'); 　var kaitou = fieldset.querySelectorAll ('input[type="checkbox"]:checked'); 　var hidden = fieldset.querySelector ('input[type="hidden"]'); 　var kotae; 　　if (seikai.length === kaitou.length) { 　　hidden.value = 'true'; 　　alert ('正解です。'); 　} 　else { 　　hidden.value = ''; 　　kotae = Array.prototype.map.call (seikai, function (e) { 　　　return e.parentNode.textContent; 　　}).join (', '); 　　alert ([ 　　　'不正解です。', 　　　'答えは、'+ kotae + 'です。' 　　].join ('\n')); 　　} } function ending () { 　var es0 = document.querySelectorAll ('fieldset.q input[type="hidden"]'); 　var es1 = document.querySelectorAll ('fieldset.q input[type="hidden"][value=""]'); 　alert ([ 　　'問題数は、'+ es0.length + 'です。', 　　'間違いは、' + es1.length + '問あります。' 　].join ('\n')); } function reset () { 　var es = document.querySelectorAll ('fieldset.q input[type="hidden"]'); 　Array.prototype.forEach.call (es, function (e) { e.value = ''; }); } function listener (event) { 　var e = event.target; 　　if ('button' === e.type) 　　switch (e.value) { 　　case '解答' : 　　　check (e); 　　　break; 　　　　case 'リセット' : 　　　reset (); 　　　break; 　　　　case '終了' : 　　　ending (); 　　　break; 　　} } reset (); document.addEventListener ('click', listener, false); </script> ここでなぜか福岡　長崎　熊本　鹿児島　佐賀　宮崎にチェックを入れて解答したらもちろん正解になります。その後に長崎のチェックを外してかわりに山形にチェックを入れて解答したらなぜか正解になります。もちろん山形はfalseにしています。しかし福岡　　山形　長崎　熊本　鹿児島　佐賀　宮崎にチェックを入れた状態で解答をすると不正解になります。何故でしょうか? 教えてください

takeharu11
お礼率39% (153/386)

JavaScript
回答数8
ありがとう数3

みんなの回答 （8）
専門家の回答

みんなの回答

amanojaku1
ベストアンサー率54% (265/488)

2016/06/01 15:36 回答No.8

下記「CheckQuestion031」はフレームワークを使用していません、フレームワークなんぞ良くワカランと言う場合にもオススメです。前に作成した「CheckQuestion026」では IE8 以下だとボタンはフラットでただの四角になってしまいますが、「CheckQuestion029」では IE8 以下(多分 IE6～IE8)でも角が丸い立体的(グラデーション)なボタンが表示できると思われますが、動的に表示位置が変更されると正常に表示できないと言う問題点がありました。「CheckQuestion031」では IE8 以下は IE 独自のグラデーション(角は丸くできない)を使用する事により、動的に表示位置が変更されても正常にできます。 CheckQuestion031 http://ashtarte.hotcom-web.com/utf8/smt.cgi?r+sara/&bid+00000020&tsn+00000039&bts+2016/05/01%2012%3A11%3A41&

amanojaku1
ベストアンサー率54% (265/488)

2016/05/22 21:00 回答No.7

せっかく作ったのでカキコしておきます(２)(笑) フレームワークは「jQuery、PIE.js」を使用しています。「IE8、Firefox」だけでしかチェックしてません。前に作成した「CheckQuestion028」では IE8 以下(多分 IE6～IE8)でも角が丸い立体的(グラデーション)なボタンが表示できると思われますが、 IE8 以下の場合最初の一瞬だけボタンはフラットでただの四角で表示されてしまいましたが、「CheckQuestion029」では IE8 以下の場合でも最初の一瞬にボタンがフラットでただの四角に表示されないようにしています。動的に表示位置が変更されると正常に表示できないので、動的に表示位置が変更されないように注意する必要があります。 http://ashtarte.hotcom-web.com/utf8/smt.cgi?r+sara/&bid+00000020&tsn+00000037&bts+2016/05/01%2012%3A11%3A41&

amanojaku1
ベストアンサー率54% (265/488)

2016/05/22 13:36 回答No.6

せっかく作ったのでカキコしておきます(笑) フレームワークは「jQuery、PIE.js」を使用しています。「IE8、Firefox」だけでしかチェックしてません。 IE8 以下(多分 IE6～IE8)でも角が丸い立体的(グラデーション)なボタンが表示できると思われます。動的に表示位置が変更されると正常に表示できないので、動的に表示位置が変更されないように注意する必要があります。 http://ashtarte.hotcom-web.com/utf8/smt.cgi?r+sara/&bid+00000020&tsn+00000035&bts+2016/05/01%2012%3A11%3A41&

babu_baboo
ベストアンサー率51% (268/525)

2016/05/19 19:35 回答No.5

誠にもって恥ずかしい限り。 function check (e) { 　var fieldset = e.parentNode; 　var hidden = fieldset.querySelector ('input[type="hidden"]'); 　var seikai = fieldset.querySelectorAll ('input[type="checkbox"][value="true"]'); 　var kaitou = fieldset.querySelectorAll ('input[type="checkbox"]:checked'); 　var matigai = fieldset.querySelectorAll ('input[type="checkbox"][value="false"]:checked'); 　if (matigai.length || kaitou.length !== seikai.length) { 　　hidden.value = ''; 　　kotae = Array.prototype.map.call (seikai, function (e) { 　　　return e.parentNode.textContent; 　　}).join (', '); 　　alert ([ 　　　'不正解です。', 　　　'答えは、'+ kotae + 'です。' 　　].join ('\n')); 　} 　else { 　　hidden.value = 'true'; 　　alert ('正解です。'); 　　} } -- 正解の判定をあえて逆の考え方にしました。 htmlの中にスプリクトをおくときは、「&&」は本来使えないので… fieldsetの中のcheckbox を拾い出すのに、querySelectorAll を連発するのは、自分でも好くないと思います。

質問者

お礼 2016/05/19 19:58

ありがとうございました。助かりました。

muuming2001
ベストアンサー率23% (202/845)

2016/05/19 19:10 回答No.4

質問者

お礼 2016/05/19 19:56

ありがとうございました。今日は仕事なので、休みの時に確認をしたいと思います。

babu_baboo
ベストアンサー率51% (268/525)

2016/05/19 16:57 回答No.3

誠にもって申し訳ございません。訂正します。 var kaitou = fieldset.querySelectorAll ('input[type="checkbox"][value="true"]:checked');

質問者

補足 2016/05/19 17:28

今試しに var kaitou = fieldset.querySelectorAll ('input[type="checkbox"]:checked'); を var kaitou = fieldset.querySelectorAll ('input[type="checkbox"][value="true"]:checked'); に変更してみました。でも結果は改善されません。やはり山形や岡山にチェックを入れても正解になります。たびたびすみません。私も自分で色々調べたりしながらしているのですが分からないのでお願いします。

muuming2001
ベストアンサー率23% (202/845)

2016/05/19 16:04 回答No.2

正解の回答数　って言い方が不明瞭でした。 value="true"　になっているチェックボックスの数（チェックが入ってるかどうかは関係ない）とユーザーがチェックをいれたチェックボックスの数を比較なのでとりあえず６個チェックを入れたら正解になるような

muuming2001
ベストアンサー率23% (202/845)

2016/05/19 16:00 回答No.1

複雑な手順踏まなくとも６個適当に回答にチェック入れれば正解になりませんか？ if (seikai.length === kaitou.length) { 正解の回答数と回答されているチェックボックスの数を比較してません？

質問者

補足 2016/05/19 16:13

すみません! 私が言いたいのはなぜかvalue="false">山形</label> で通常は山形はfalseなので不正解にならなければいけないのに山形にチェックを入れても正解になるのです。

関連するQ&A

Javascriptの結果の出し方で困っています。
自分のサイトにチェッカーを入れたくて下記の記述を書きました。 <script> function calc(f){ var sum=0; for(var i=0;i<f.length;i++){ if(f[i].type=="radio" && f[i].checked) sum+=parseInt(f[i].value); } f.judge.value=sum; } </script> <form action="chekker/" method="post"> <ol> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q1" id="Q1_1" value="2"><label for="Q1_1">はい</label> <input type="radio" name="Q1" id="Q1_2" value="0"><label for="Q1_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q2" id="Q2_1" value="2"><label for="Q2_1">はい</label> <input type="radio" name="Q2" id="Q2_2" value="0"><label for="Q2_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q3" id="Q3_1" value="2"><label for="Q3_1">はい</label> <input type="radio" name="Q3" id="Q3_2" value="0"><label for="Q3_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q4" id="Q4_1" value="2"><label for="Q4_1">はい</label> <input type="radio" name="Q4" id="Q4_2" value="0"><label for="Q4_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q5" id="Q5_1" value="2"><label for="Q5_1">はい</label> <input type="radio" name="Q5" id="Q5_2" value="0"><label for="Q5_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q6" id="Q6_1" value="2"><label for="Q6_1">はい</label> <input type="radio" name="Q6" id="Q6_2" value="0"><label for="Q6_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q7" id="Q7_1" value="2"><label for="Q7_1">はい</label> <input type="radio" name="Q7" id="Q7_2" value="0"><label for="Q7_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q8" id="Q8_1" value="2"><label for="Q8_1">はい</label> <input type="radio" name="Q8" id="Q8_2" value="0"><label for="Q8_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q9" id="Q9_1" value="2"><label for="Q9_1">はい</label> <input type="radio" name="Q9" id="Q9_2" value="0"><label for="Q9_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q10" id="Q10_1" value="2"><label for="Q10_1">はい</label> <input type="radio" name="Q10" id="Q10_2" value="0"><label for="Q10_2">いいえ</label> </ol> <center> <p><font size="+1" color="#FF0000"><b>採点！！</b></font></p> <input type="text" name="judge" value="0" SIZE="10"> <input type="button" value="採点する" onClick="calc(this.form)"> </p></center> </form> はいが2点、いいえが0点とします。この記述方法だと、テキストボックスに点数の合計が記載されてしまいます。別ページに点数の合計を呼び出したいのですが、どうすればいいのでしょうか。 ※ページの内容で中身が変わるわけではなく、点数の結果を表示したいです。 ※呼び出す際のコードも記載していただけたらありがたいです ※結果のページをkekka.htmlとします。初心者なのでどうしたらいいのか分かりません。よろしくお願いします。
- 締切済み
- JavaScript
Javascriptの結果の出し方で困っています
自分のサイトにチェッカーを入れたくて下記の記述を書きました。 <script> function calc(f){ var sum=0; for(var i=0;i<f.length;i++){ if(f[i].type=="radio" && f[i].checked) sum+=parseInt(f[i].value); } f.judge.value=sum; } </script> <form action="chekker/" method="post"> <ol> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q1" id="Q1_1" value="2"><label for="Q1_1">はい</label> <input type="radio" name="Q1" id="Q1_2" value="0"><label for="Q1_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q2" id="Q2_1" value="2"><label for="Q2_1">はい</label> <input type="radio" name="Q2" id="Q2_2" value="0"><label for="Q2_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q3" id="Q3_1" value="2"><label for="Q3_1">はい</label> <input type="radio" name="Q3" id="Q3_2" value="0"><label for="Q3_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q4" id="Q4_1" value="2"><label for="Q4_1">はい</label> <input type="radio" name="Q4" id="Q4_2" value="0"><label for="Q4_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q5" id="Q5_1" value="2"><label for="Q5_1">はい</label> <input type="radio" name="Q5" id="Q5_2" value="0"><label for="Q5_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q6" id="Q6_1" value="2"><label for="Q6_1">はい</label> <input type="radio" name="Q6" id="Q6_2" value="0"><label for="Q6_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q7" id="Q7_1" value="2"><label for="Q7_1">はい</label> <input type="radio" name="Q7" id="Q7_2" value="0"><label for="Q7_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q8" id="Q8_1" value="2"><label for="Q8_1">はい</label> <input type="radio" name="Q8" id="Q8_2" value="0"><label for="Q8_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q9" id="Q9_1" value="2"><label for="Q9_1">はい</label> <input type="radio" name="Q9" id="Q9_2" value="0"><label for="Q9_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q10" id="Q10_1" value="2"><label for="Q10_1">はい</label> <input type="radio" name="Q10" id="Q10_2" value="0"><label for="Q10_2">いいえ</label> </ol> <center> <p><font size="+1" color="#FF0000"><b>採点！！</b></font></p> <input type="text" name="judge" value="0" SIZE="10"> <input type="button" value="採点する" onClick="calc(this.form);window.open('kekka.html','windowname');"> </p></center> </form> はいが2点、いいえが0点とします。この記述方法だと、テキストボックスに点数の合計が記載されてしまいます。別ページのテキストボックス内に点数の合計を呼び出したいのですが、どうすればいいのでしょうか。出来れば呼び出す際のソースコードなどもすべて記載していただけるとありがたいです。 ※ページの内容で中身が変わるわけではなく、点数の結果を表示したいです。 ※呼び出す際のコードも記載していただけたらありがたいです ※結果のページをkekka.htmlとします。初心者なのでどうしたらいいのか分かりません。よろしくお願いします。
- 締切済み
- JavaScript
チェックボックスがIE８で正しく動作しないのはなぜ
下記サンプルコードをIE８やIE７で試してみると、チェックボックスをクリックしてもその時点で動かず、ウインドウ上のどこかをクリックしないと動きません。 Firefox, Chrome, IE9ではチェックボックスをクリックした時点で動きます。どこに問題があるのでしょうか。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> </head> <body> <form> <ul id="t"> <li><input type="checkbox" name="t_0" onchange="fff()" value="0pt" /><label for="t_0">0pt</label></li> <li><input type="checkbox" name="t_1" onchange="fff()" value="10pt" /><label for="t_1">10pt</label></li> <li><input type="checkbox" name="t_2" onchange="fff()" value="20pt" /><label for="t_2">20pt</label></li> <li><input type="checkbox" name="t_3" onchange="fff()" value="30pt" /><label for="t_3">30pt</label></li> <li><input type="checkbox" name="t_4" onchange="fff()" value="40pt" /><label for="t_4">40pt</label></li> <li><input type="checkbox" name="t_5" onchange="fff()" value="50pt" /><label for="t_5">50pt</label></li> <li><input type="checkbox" name="t_6" onchange="fff()" value="60pt" /><label for="t_6">60pt</label></li> <li><input type="checkbox" name="t_7" onchange="fff()" value="70pt" /><label for="t_7">70pt</label></li> <li><input type="checkbox" name="t_8" onchange="fff()" value="80pt" /><label for="t_8">80pt</label></li> <li><input type="checkbox" name="t_9" onchange="fff()" value="90pt" /><label for="t_9">90pt</label></li> <li><input type="checkbox" name="t_10" onchange="fff()" value="100pt" /><label for="t_10">100pt</label></li> </ul> </form> <table> <tr> <td>サンプル1 ：</td><td>60pt</td> </tr> </table> <table> <tr> <td>サンプル2 ：</td><td>30pt</td> </tr> </table> <table> <tr> <td>サンプル3 ：</td><td>40pt</td> </tr> </table> <script type="text/javascript"> function fff() { var a = new Array; var b = document.getElementById('t').getElementsByTagName("input"); var c = document.getElementsByTagName('table'); for(i=0,len=b.length; i<len; i++){ if(b[i].checked == true){ a[i] = b[i].value; }else{ a[i] = ""; } } for(i=0,len=c.length; i<len; i++){ var d = c[i].getElementsByTagName('td'); var e = d[1].innerHTML; var if1 = a[0]==e || a[1]==e || a[2]==e || a[3]==e || a[4]==e || a[5]==e || a[6]==e || a[7]==e || a[8]==e || a[9]==e || a[10]==e; var if2 = a[0]=="" && a[1]=="" && a[2]=="" && a[3]=="" && a[4]=="" && a[5]=="" && a[6]=="" && a[7]=="" && a[8]=="" && a[9]=="" && a[10]==""; if(if1 || if2){ c[i].style.display = ''; }else{ c[i].style.display = 'none'; } } } </script> </body> </html>
- ベストアンサー
- JavaScript
選択の有無を制御したい
name="q2"が選択されていなければname="q3"が選択できるようになり name="q2"が選択されていればname="q3"が選択できないように制御したいのですがどのようにすればできるでしょうか？仮にname="q3"が選択されている状態でname="q2"が選択された場合にはname="q3"の選択値をクリアさせたいです。サンプルがあるようなurl等の情報でも構いませんので実現できる方法を教えてください。現在のhtmlは以下の通りです。 <dl> <dt>検索地域</dt> <dd> <label><input type="checkbox" name="q2" value="1" /> 地域を指定しない</label> <br /> <label><input type="checkbox" name="q3" value="1"> ○○市</label> <label><input type="checkbox" name="q3" value="2" /> ××市</label> <label><input type="checkbox" name="q3" value="3" /> △△市</label> </dd> </dl>
- ベストアンサー
- JavaScript
javascript 問題と答え
独学でjsをやっているのですが、わからないところがあるので質問させてください。ラジオボタンを選択し、解答ボタンクリックで、オレンジの欄に解答が出るようなプログラムを書いたのですが、実行されません。どこが間違っているのでしょうか。 /* ----------------　▽▽▽ここから▽▽▽　-------------------------- */ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js問題</title> <style type="text/css"> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6, pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin:0;padding:0; } img{ border:0; } h1 { font-size:22px; } h2 { font-size: 12px; } #box { width: 500px; overflow:hidden; /*子要素にfloatがあり、高さ算出のため使用*/ } div.box { width: 150px; float: left; background-color: #CCC; margin-left: 10px; } li { list-style:none; } div#ans { width: 500px; height: 20px; clear:both; margin-top: 20px; margin-bottom: 30px; } div#ans p { width: 150px; background-color: #FC6; margin-left:10px ; float:left; } div#ans_btn { width: 200px; clear:both; margin-left:200px; } </style> </head> <body> <h1>Q.問題</h1> <br /> <div id="box"> <div class="box"> <ul> <h2>問題その１</h2> <li><input type="radio" name="q0" value="1">あいうえお</li> <li><input type="radio" name="q0" value="2">正解</li> <li><input type="radio" name="q0" value="3">あいうえお</li> <li><input type="radio" name="q0" value="4">あいうえお</li> </ul> </div> <div class="box"> <ul> <h2>問題その2</h2> <li><input type="radio" name="q1" value="1">あいうえお</li> <li><input type="radio" name="q1" value="2">あいうえお</li> <li><input type="radio" name="q1" value="3">正解</li> <li><input type="radio" name="q1" value="4">あいうえお</li> </ul> </div> <div class="box"> <ul> <h2>問題その3</h2> <li><input type="radio" name="q2" value="1">正解</li> <li><input type="radio" name="q2" value="2">あいうえお</li> <li><input type="radio" name="q2" value="3">あいうえお</li> <li><input type="radio" name="q2" value="4">あいうえお</li> </ul> </div> </div> <div id="ans"> <p>問い１答え</p> <p>問い2答え</p> <p>問い3答え</p> </div> <div id="ans_btn"> <input type="button" value="ここを押すと解答"　onClick="saiten()"> </div> <script type="text/javascript"> var ans = ["2","3","1"]; function saiten(){ var p_node=document.getElementsByTagName("p"); for(var i=0;i<ans.length;i++){ if(ans[i]==document.getElementById("q"+i).value){ p_node[i].innerHTML = "正解"; }else{ p_node[i].innerHTML = "間違い"; } } } </script> </body> </html> /* ----------------△△△ここまで△△△------------------------ */ よろしくおねがいします。
- ベストアンサー
- JavaScript
javascriptでのテキストボックス制御
javascriptを使用して特定のテキストボックスを動的に　enable←→disableを切り替えたく、様々なホームページを見ながら試行錯誤して、下記ソースまで辿りつきましたが、うまく動かなくて困っています。どうかご教示ください。よろしくお願いします。現状：チェックをいれると enable→disableになるが、外すと戻らない。目標：同上＋チェック外すと最初disableも含めて、enableになる。 <html> <head> <script language="javascript" type="text/javascript"> function autochk(f){ for(var i=0;i<f.form.length;i++){ if (f.form.elements[i].className=="ko"){ if (f.form.elements[i].checked){　//checked チェックが入っていたら f.form.elements[i].disabled = false; // 入力不可, 無効化 }else{ f.form.elements[i].disabled = true; // 入力可能,有効化 } } } } </script> <style type="text/css">  </style> </head> <body> <form> <ul> <li><input type="checkbox" name="oya" value="1" onclick="autochk(this);">チェック</li> <li><label>無効→チェック→無効→有効</label><input type="text" name="ko1" class="ko" value="1" disabled></li> <li><label>有効→チェック→無効→有効</label><input type="text" name="ko2" class="ko" value="1"></li> <li><label>有効→チェック→そのまま</label><input type="text" name="other1" value="1"></li> <li><label>有効→チェック→無効→有効</label><input type="text" name="ko3" class="ko" value="1"></li> <li><label>有効→チェック→無効→有効</label><input type="text" name="ko4" class="ko" value="1"></li> <li><label>有効→チェック→そのまま</label><input type="text" name="other2" value="1"></li> </form> </ul> </body> </html>
- ベストアンサー
- JavaScript
フォームの上下に一括チェックボックスを置くには？
HTML＋Javascriptで、選択削除のフォームを作っています。一覧の上下に一括チェックボックスを置きたいのですが上手く行かないのです。 -------------------- javascript↓ -------------------- //一括チェック用チェックボックス function allcheck() { var count = document.delete.chk.length; var allcheck = document.delete.chk_all.checked; for ( var i=0; i<count; i++) { var check = document.delete.chk[i].checked; if (allcheck == true) { document.delete.chk[i].checked = true; } else { document.delete.chk[i].checked = false; } } } //個別チェック用チェックボックス function check(onjCheck) { if (onjCheck.checked == false) { document.delete.chk_all.checked = false; return; } var count = document.delete.chk.length; for (var i=0; i<count; i++) { if (document.delete.name != "chk_all" && document.delete.chk[i].checked == false) { return; } } document.delete.chk_all.checked = true; } -------------------- HTML↓ -------------------- <form action="" name="delete"> <fieldset> <input type="checkbox" name="chk_all" id="all_head" onclick="allcheck(this)"> <label for="all_head">すべて選択／解除</label> <input type="submit" value="選択した項目を削除"> </fieldset> <fieldset> <input type="checkbox" name="chk" onclick="check(this)"> 項目1 <input type="checkbox" name="chk" onclick="check(this)"> 項目2 <input type="checkbox" name="chk" onclick="check(this)"> 項目3 </fieldset> <fieldset> <input type="checkbox" name="chk_all" id="all_foot" onclick="allcheck(this)"> <label for="all_foot">すべて選択／解除</label> <input type="submit" value="選択した項目を削除"> </fieldset> </form> このように記述しています。上か下か、片方であれば一括チェックを実現できました。当方Javascript初心者です。よろしくご教示願います。
- 締切済み
- JavaScript
ラジオボタンの未選択チェックについて
ラジオボタンの未選択チェックに困っています！フォームに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">  </script> 初心者のため、何を変えたらいいのか・・・ホームページを調べたのですが分かりませんでした。「name」が漢字の場合、どのように指示したらいいのか、ぜひぜひご教授願います。どうぞよろしくお願いいたします。
- 締切済み
- JavaScript
CGIでラジオボタンの選択結果を保持する
http://okwave.jp/qa/q8211303.html 上記質問の続きです。 Q1,Q2,Q3・・・と質問をいくつか用意し、それぞれで選択したラジオボタンによって、最終ページに表示させる回答を変えたいです。ひとつ前のページで選択したものを次ページに反映させることはなんとかできたのですが何ページも前に選択した回答を、最終ページに反映させる方法がわかりません。 <input type="hidden"を使うところまでは教えていただいたのですが具体的にどうしていいかわかりません。参考サイト等ありましたら教えていただけますでしょうか。よろしくお願いいたします！ちなみに作成方法は以下のような感じです。【Q1】 <form name="q1" action="com.cgi" method="POST"> <input type="hidden" name="stage" value="q1" /> <ol> <li><input type="radio" name="q11" value="q11_a"> 犬がすき</li> <li><input type="radio" name="q11" value="q11_b"> 猫がすき</li> <li><input type="radio" name="q11" value="q11_c"> うさぎがすき</li> </ol> <ol> <li><input type="radio" name="q12" value="q12_a"> 右利き</li> <li><input type="radio" name="q12" value="q12_b"> 左利き</li> </ol> <input type="submit" value="次へ" /> 【Q2】 <form name="q2" action="com.cgi" method="POST"> <input type="hidden" name="stage" value="q2" /> <ol> <li><input type="radio" name="q21" value="q21_a"> 海がすき</li> <li><input type="radio" name="q21" value="q21_b"> 山がすき</li> <li><input type="radio" name="q21" value="q21_c"> 散歩がすき</li> </ol> <input type="submit" value="次へ" /> 【Q3】 <form name="q3" action="com.cgi" method="POST"> <input type="hidden" name="stage" value="q3" /> <ol> <li><input type="radio" name="q31" value="q31_a"> 男性</li> <li><input type="radio" name="q31" value="q31_b"> 女性</li> </ol> <ol> <li><input type="radio" name="q32" value="q32_a"> 既婚</li> <li><input type="radio" name="q32" value="q32_b"> 未婚</li> </ol> <input type="submit" value="判定" /> 【最終ページ】「あなたは犬がすきで右利きですね」「あなたは海がすきですね」「あなたは女性で既婚ですね」と表示させたいです。実際には、Q1→Q2→Q3と順番にページが飛ぶのではなく、この答えだったら次はこのページ、それ以外は別のページ、といった感じで、様々なページに飛びます。以下のような感じで条件分岐を書いています。 if ($stage eq "q1") { if ($q11 eq "q11_a") { Q2(); } elsif ($q11 eq "q11_c") { ・・・; } elsif ($q12 eq "q12_b") { Q3(); } else { ・・・; } } よろしくお願いいたします！
- ベストアンサー
- CGI
scriptについて質問です。
自分のサイトにチェッカーを入れたくて下記の記述を書きました。 <script> function calc(f){ var sum=0; for(var i=0;i<f.length;i++){ if(f[i].type=="radio" && f[i].checked) sum+=parseInt(f[i].value); } f.judge.value=sum; } </script> <form action="chekker/" method="post"> <ol> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q1" id="Q1_1" value="2"><label for="Q1_1">はい</label> <input type="radio" name="Q1" id="Q1_2" value="0"><label for="Q1_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q2" id="Q2_1" value="2"><label for="Q2_1">はい</label> <input type="radio" name="Q2" id="Q2_2" value="0"><label for="Q2_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q3" id="Q3_1" value="2"><label for="Q3_1">はい</label> <input type="radio" name="Q3" id="Q3_2" value="0"><label for="Q3_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q4" id="Q4_1" value="2"><label for="Q4_1">はい</label> <input type="radio" name="Q4" id="Q4_2" value="0"><label for="Q4_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q5" id="Q5_1" value="2"><label for="Q5_1">はい</label> <input type="radio" name="Q5" id="Q5_2" value="0"><label for="Q5_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q6" id="Q6_1" value="2"><label for="Q6_1">はい</label> <input type="radio" name="Q6" id="Q6_2" value="0"><label for="Q6_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q7" id="Q7_1" value="2"><label for="Q7_1">はい</label> <input type="radio" name="Q7" id="Q7_2" value="0"><label for="Q7_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q8" id="Q8_1" value="2"><label for="Q8_1">はい</label> <input type="radio" name="Q8" id="Q8_2" value="0"><label for="Q8_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q9" id="Q9_1" value="2"><label for="Q9_1">はい</label> <input type="radio" name="Q9" id="Q9_2" value="0"><label for="Q9_2">いいえ</label> <br><br> <li>aaaaaaaaaaaaa<br> <input type="radio" name="Q10" id="Q10_1" value="2"><label for="Q10_1">はい</label> <input type="radio" name="Q10" id="Q10_2" value="0"><label for="Q10_2">いいえ</label> </ol> <center> <p><font size="+1" color="#FF0000"><b>採点！！</b></font></p> <input type="text" name="judge" value="0" SIZE="10"> <input type="button" value="採点する" onClick="calc(this.form);window.open('kekka.html','windowname');"> </p></center> </form> 質問項目が10個あるのですが、どれか一つにでもチェックが入っていない場合「全てチェックしてください」と返したいのですがどうすればいいのでしょうか？また点数の合計が10点の時は1.html 点数が14点の時は2.htmlという場合どういった記述をすればいいのでしょうか？ご面倒ですが回答のほどよろしくお願いします。
- ベストアンサー
- JavaScript

JavaScriptで選択問題作成(3)