javascriptの質問です 複数選択式クイズページを作成しています

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/02/17 01:06:42
  • 終了:2014/02/17 08:22:56
id:takanii
<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="採点する">

ベストアンサー

id:windofjuly No.1

うぃんど回答回数2625ベストアンサー獲得回数11492014/02/17 07:10:59

ポイント1000pt

一例
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>
他1件のコメントを見る
id:windofjuly

http://q.hatena.ne.jp/1392595098

対象がtable直下からtbody下になったなら…。

document.getElementsByTagName("table")[0]
  ↓
document.getElementsByTagName("table")[0].getElementsByTagName("tbody")[0]
2014/02/17 09:13:18
id:takanii

なるほど!ありがとうございました!

2014/02/17 09:17:53

その他の回答(0件)

id:windofjuly No.1

うぃんど回答回数2625ベストアンサー獲得回数11492014/02/17 07:10:59ここでベストアンサー

ポイント1000pt

一例
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>
他1件のコメントを見る
id:windofjuly

http://q.hatena.ne.jp/1392595098

対象がtable直下からtbody下になったなら…。

document.getElementsByTagName("table")[0]
  ↓
document.getElementsByTagName("table")[0].getElementsByTagName("tbody")[0]
2014/02/17 09:13:18
id:takanii

なるほど!ありがとうございました!

2014/02/17 09:17:53

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません