人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptの質問です 複数選択式クイズページを作成しています
正解だと思うチェックボックスにチェックを入れて採点ボタンを押し
もし間違いだったら問題番号の下のチェックボックスにチェックが入るようにしたいのですが
どのようなjavascriptを組めばよろしいでしょうか?よろしくお願いします
ちなみにこちらが以下のスクリプトの fiddle版です http://jsfiddle.net/m2Pfg/

●質問者: takanii
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から
<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>

takaniiさんのコメント
大変有難うございました!

うぃんどさんのコメント
> http://q.hatena.ne.jp/1392595098 対象がtable直下からtbody下になったなら…。 >|html| document.getElementsByTagName("table")[0] ↓ document.getElementsByTagName("table")[0].getElementsByTagName("tbody")[0] ||<

takaniiさんのコメント
なるほど!ありがとうございました!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ