ボックスにチェックが入っているかどうかを確認するにはどうすればよいでしょうか？

Question

以下のコードは4つのことを行うべきです。答えがチェックされている場合ので、緑にBTN変更した場合は赤

BTN回らない場合

1）チェックボックスがチェックされている場合は、警告ではないユーザーが回答を選択するかどうかを確認してください

2）を確認してください

3）あなたのコードでかなりの数の誤植がありました

4）

<div class="theBigBox"> 
    <h3>1. How can you make a text bold in HTML ?</h3> 
     <div class='answerBox'> 
      <input type="checkbox" class="question1" id="qOne" value="1"> (A) &lt b &gt text &lt b &gt 
      <input type="checkbox" class="question1" id="qTwo" value="2"> (B) Both <br> 
      <input type="checkbox" class="question1" id="qThree" value="3"> (C) &lt strong &gt text &lt strong &gt 
      <input type="checkbox" class="question1" id="qFour" value="4"> (D) Neither<br> 
      <button type="submit" value="Submit" id="ansSubmit" onclick=testSubmit()"> Check Your Answer</button> 
      <button type="submit" value="Submit" id="testTip" onclick="myTip()"> Ask For A Tip</button> 
     </div> 

function ansSubmit(){ 
    var ans = document.getElementsById('qThree'); 
    var ansCheck = ans.checked; 
    var checkbox=document.getElementsClassName("question1"); 
    var okay=false; 

    for(var i=0,l=checkboxs.length;i<l;i++) 
    { 
    if(checkboxs[i].checked) 
    { 
     okay=true; 
     break; 
    }else if(ans.check == false){ 
     alert("Please select an answer");//if check is not checked then alert a warning 
    }else if(ansCheck !== true){ 
     document.getElementById("testSubmit").style.backgroundColor = "red";//if ans not checked then turn button red 
    }else if{ 
     document.getElementById("testSubmit").style.backgroundColor = "green";//turn button green 
    }else alert("Please check a checkbox"); 
    } 
} 

Answer 1

確認してください。最初の変更はjavascriptにありました。checkboxとcheckboxsという2つの変数がありました。それをちょうどcheckboxsにすることで、それらをすべて配列として扱うことができます。

getElementByIdとgetElementsByClassNameは、javascript DOMを使用してidまたはclassnameで要素にアクセスする正しい方法です。ここで

<div class="theBigBox"> 
    <h3>1. How can you make a text bold in HTML ?</h3> 
    <div class='answerBox'> 
    <input type="checkbox" class="question1" id="qOne" value="1"> (A) b text 
    <input type="checkbox" class="question1" id="qTwo" value="2"> (B) Both 
    <br> 
    <input type="checkbox" class="question1" id="qThree" value="3"> (C) strong text strong 
    <input type="checkbox" class="question1" id="qFour" value="4"> (D) Neither 
    <br> 
    <button id="ansSubmit" onclick="ansSubmit()">Click me</button> 
    <button type="submit" value="Submit" id="testTip" onclick="myTip()"> Ask For A Tip</button> 
    </div> 

<script> 
function ansSubmit() { 
    var ans = document.getElementById('qThree'); 
    var ansCheck = ans.checked; 
    var checkboxs = document.getElementsByClassName("question1"); 
    var okay = false; 
    for (var i = 0; i < checkboxs.length; i++) { 
    if (checkboxs[i].checked) { 
     okay = true; //Only if one checkbox is checked set okay to true 
    } 
    } 

    // Check if none of the boxes were checked 
    // If none are checked, then throw an alert to select an answer and 
    // set the background color of the button to red 
    if (!okay) { 
    document.getElementById("ansSubmit").style.backgroundColor="red"; 
    window.alert("Please select an answer"); 
    } else if(okay && ansCheck) { // if one checkbox is checked and the right answer is checked, set the background color of the button to green 
     document.getElementById("ansSubmit").style.backgroundColor="green"; 
    } else { // else, the user selected something but didn't select the right answer, tell them its the wrong answer 
    window.alert("Wrong answer"); 
    } 

} 
</script> 

はjsfiddle