<table> <tr> <td>第1問<input type="checkbox"></td> <td>赤いものはどれか すべて選べ<BR> <input type="checkbox">a りんご<BR> <input type="checkbox">b みかん<BR> <input type="checkbox">c バナナ<BR> <input type="checkbox">d グレープフルーツ<BR> <input type="checkbox">e 雪</td> <td>a</td></tr> <tr> <td>第2問<input type="checkbox"></td> <td>赤いものはどれか すべて選べ<BR> <input type="checkbox">a りんご<BR> <input type="checkbox">b 赤信号<BR> <input type="checkbox">c いちご<BR> <input type="checkbox">d グレープフルーツ<BR> <input type="checkbox">e 雪</td> <td>abc</td></tr> </table> <input type="button" value="採点する">
▽1
●
うぃんど ●1000ポイント ベストアンサー |
一例
jQueryなどは使わずに素のjavascriptのみで対応
チェック環境はWindows8.1ProでIE11とFirefox27.0.1のみ
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type='text/javascript'> window.onload = function(){ // onLoadイベントで動作させる var e = document.getElementsByTagName("input"); // インプット要素取得 e.item( e.length - 1 ).onclick = function(){ // 最後のインプット要素にonClickイベントを追加 for( var t = document.getElementsByTagName("table")[0], k = 0; k < t.rows.length ; ++k ){ // 最初のテーブルを対象として行数分ループ var a = ""; // 答えのクリア for( var c = t.rows[k].cells[1].childNodes, i = 0; i < c.length; ++i ){ // 子要素の数だけループ if( c[i].checked == 1 ){ // チェックの入っている項目の次のノードから先頭1文字を抜き出して答えに加える。 a += c[++i].nodeValue.charAt(0); } } t.rows[k].cells[0].getElementsByTagName("input")[0].checked = a != t.rows[k].cells[2].innerHTML ? 1 : 0; // 答え合わせ } } } </script> </head> <body> <table> <tr> <td>第1問<input type="checkbox"></td> <td>赤いものはどれか すべて選べ<br> <input type="checkbox">a りんご<br> <input type="checkbox">b みかん<br> <input type="checkbox">c バナナ<br> <input type="checkbox">d グレープフルーツ<br> <input type="checkbox">e 雪 </td> <td>a</td> </tr> <tr> <td>第2問<input type="checkbox"></td> <td>赤いものはどれか すべて選べ<br> <input type="checkbox">a りんご<br> <input type="checkbox">b 赤信号<br> <input type="checkbox">c いちご<br> <input type="checkbox">d グレープフルーツ<br> <input type="checkbox">e 雪 </td> <td>abc</td> </tr> </table> <input type="button" value="採点する"> </body> </html>