javascriptでのラジオボタン取得方法について

Question

###前提・実現したいこと
javascriptにてクイズを作成しています。
ラジオボタンの選択している方を検出して、処理をしたいと思いますがなかなかうまくいきません。
ご教授宜しくお願います。

今問題の場所を上下にランダムで配置するようにし、正解側が選択され、回答ボタンが押されたら、answer
に正解・不正解を表示したく作成しています。

DOMの取得等について、いろいろ見ていますがいまいちピンときません。ネットで参考になりそうな
コードを調べてみても、ラジオボタンにformタグがついている前提で説明されています。
私のコードもwebアプリケーションにするわけでないのでラジオボタンにformタグはつけていませんが、
どの説明を見ても、formからの取得になっていて理解できません。(私の理解不足が原因ですが・・・)

同時にDOMを理解できるサイトとかあれば、教えて頂けないかと合わせてお願いします。
（今回のソフト作成時に教えて頂いた、document.getElementById('choice1').nextSibling.nodeValue
id=choice1と定義されている次の子ノードのテキストノードのvalueを書き換えているのは理解できました。
id=choice1のラジオボタンが選択させた時に取得したいのはどれなのかは、よくわかっていません。
分かるようになりたいです）

もう一つ疑問点がありますが、これが理解出来たらお聞きします。
###発生している問題・エラーメッセージ

特にエラーはなし、ラジオボタンの選択している部分をいろいろ試してみましたが理解できずにいます。

###該当のソースコード

  <h1>問題集1</h1>
        <p id="que">ここに問題が表示されます</p>
        <div>
            <input id="choice1" type="radio" name="choice" >○○○<br>
            <input id="choice2" type="radio" name="choice" >×××<br>
            <input type="button" value="回答する" onclick="button_click();">
        </div>
        <p id="answer"></p>
        <p id="last"></p>
    <footer><a href="index.html">最初へ</a></footer>

var i = 0;
var judge ,rand;
window.addEventListener("load", function() {
    show_question(0);
}, false);

function end_study(i) {
    document.getElementById('que').innerHTML = "問題はすべて終了しました!!";
    document.getElementById('choice1').nextSibling.nodeValue = "全問終了";
    document.getElementById('choice2').nextSibling.nodeValue = "全問終了";
    document.getElementById('answer').innerHTML = "";
    document.getElementById('last').innerHTML = "疲れるので休憩を取りましょう!!";
    i = 0;
}

function show_question(i) {
    keyword_replace(i);
    document.getElementById('que').innerHTML = q[i]; //test_1.jsの配列をそのまま取り込む
    //問題の配置をランダムにする。
    rand = Math.floor(Math.random() * 9);
    judge = rand % 2;
    if (judge == 0) {
        document.getElementById('choice1').nextSibling.nodeValue = exac_a[i]; //同上
        document.getElementById('choice2').nextSibling.nodeValue = miss_a[i]; //同上
    } else if (judge == 1) {
        document.getElementById('choice1').nextSibling.nodeValue = miss_a[i]; //同上
        document.getElementById('choice2').nextSibling.nodeValue = exac_a[i]; //同上
        //document.querySelector('label[for="choice1"]').innerHTML="選択肢B";
    }
        if (i == 4) {
            end_study(i);
        }
}

function button_click() {
    document.getElementById('answer').innerHTML = "";
    var radio1 = document.getElementById('choice1').value;
    var radio2 = document.getElementById('choice2').value;
    //console.log("judge:"+judge);
    console.log("mark1:"+radio1);
    console.log("mark2:"+radio2);
    if ((judge == 0) && ( radio1.value == 1)) {
        document.getElementById('answer').innerHTML = "全問の答え：正解でした";
    } else if ((judge == 0) && ( radio1.value == 0)) {
        document.getElementById('answer').innerHTML = "全問の答え：間違いでした";
    } else if ((judge == 1) && (radio2.value == 1) ) {
        document.getElementById('answer').innerHTML = "全問の答え：間違いでした";
    } else if((judge  == 1) && (radio2.value ==0)){
        document.getElementById('answer').innerHTML = "全問の答え：正解でした";
    }
    i++;
    show_question(i);
}
---------------------------------------文字変換用.js--------------------------------------------
/*
 *文字の置換
 */
 var str_q = new String();
 var str_exca_a = new String();
 var str_miss_a = new String();
 var i = 0;
 var keystart = null;
 var keyend = null;
 key1start ="<span id=\"keyword1\">";
 key2start ="<span id=\"keyword2\">";
 keyend ="</span>";

var keyword = {
    徐行:key1start + "徐行(すぐに停止できる速度:何kmとかはない)" +keyend,
    車両横断禁止:"車両横断禁止(しゃりょうおうだんきんし)",
    緊急自動車:"緊急自動車(きんきゅうじどうしゃ：パトカー、救急車、消防車)"
};

function keyword_replace(i) {
    var str_q = q[i];

    str_q = str_q.replace("徐行",keyword.徐行);
    str_q = str_q.replace("車両横断禁止",keyword.車両横断禁止);
    str_q = str_q.replace("緊急自動車",keyword.緊急自動車);
    q[i] = str_q;

    var str_exac_a = exac_a[i];
    str_exac_a = str_exac_a.replace("徐行",keyword.徐行);
    str_exac_a = str_exac_a.replace("車両横断禁止",keyword.車両横断禁止);
    str_exac_a = str_exac_a.replace("緊急自動車",keyword.緊急自動車);
    exac_a[i] =str_exac_a ;

    var str_miss_a = miss_a[i];
    str_miss_a = str_miss_a.replace("徐行",keyword.徐行);
    str_miss_a = str_miss_a.replace("車両横断禁止",keyword.車両横断禁止);
    str_miss_a = str_miss_a.replace("緊急自動車",keyword.緊急自動車);
    miss_a[i] = str_miss_a;
}

###試したこと
value,cheakedなど色々試しましたが、自分の思う動きになりません。

Answer 1

すでに回答されている方もいらっしゃいますが、
「webアプリケーションにするわけでないのでラジオボタンにformタグはつけていません」
という部分ですが、別にwebアプリケーションにしなくてもラジオボタンをformタグで囲っても問題ありません。
（単にsubmitしないだけなので）
formタグでかこえないから難しいとの感じられているのであれば、囲ってしまうのも手かもしれません。

Comments

[michiaki]

そうですね。個人的にformタグ=submitと思い込んでしまっていました。下の回答にて
formタグつける方がスッキリ記述できるのなら、そちらを選択した方がいいと思います。
あんまり自分の考え方にこだわり過ぎず、柔軟なプログラミングをしていきたいと思います。

Answer 2

judgeが0でchoice1が選択されていたら正解、judgeが1でchoice2が選択されていたら正解ということでしたら

function button_click() {
    var radio1 = document.getElementById('choice1');
    var radio2 = document.getElementById('choice2');

    if ((judge == 0) && ( radio1.checked)) {
        document.getElementById('answer').innerHTML = "全問の答え：正解でした";
    } else if ((judge == 0) && ( radio1.checked)) {
        document.getElementById('answer').innerHTML = "全問の答え：間違いでした";
    } else if ((judge == 1) && (radio2.checked) ) {
        document.getElementById('answer').innerHTML = "全問の答え：間違いでした";
    } else if((judge  == 1) && (radio2.checked)){
        document.getElementById('answer').innerHTML = "全問の答え：正解でした";
    }

Comments

[michiaki]

console.log(radio1.cheaked);で値を取得すると、undifinedとなり判定条件でも動作が機能していませんでした。問題のランダム表示を入れる前は確かこれで実行できた気がしますが、今はうまくif文で判定できません。

[michiaki]

すいません私の勘違いでした。訂正致します。

Answer 3

ラジオボタンをformの中に入れて、下記コードで取得してみてはいかがですか？

document.forms.(参照するフォームのid).(参照するラジオボタンのid).checked

Comments

[michiaki]

説明が簡潔で実際うまく動作できましたので、ベストアンサーにさせて頂きます。

[Diawel]

ベストアンサーありがとうございます。