title: RadioButton always returning false - JavaScript
body: <p>I have a HTML page that have many section with inputs consisting of <code>RadioButtons</code> and <code>CheckBox</code>. The first one of them is like this:</p>
  
  <pre><code>&lt;div  style="margin-top: 30px; height: 270px;"&gt;
      &lt;input id="Answer1" type="radio" name="Answers" title="True" onclick="setAnswered();"/&gt;True&lt;br/&gt;
      &lt;input type="radio" name="Answers" title="False" onclick="setAnswered();" /&gt;False
  &lt;/div&gt;
  &lt;div id="replaceAble1_a" style="display: none;"&gt;Answer1&lt;/div&gt;
  </code></pre>
  
  <p>After the final input I am looking for each input and investigating that the correct answers are checked. Here is the part of script that is doing this job:</p>
  
  <pre><code>var ansList = document.getElementById(thisFrame + "_a").innerHTML.split(",");
  for (var k = 0; k &lt; ansList.length; k++) {
     var ele =  document.getElementById(ansList[k]);
     result = result &amp; ele.checked ;
  }
  </code></pre>
  
  <p>where <code>thisFrame</code> for this iteration is <code>replaceAble1</code>. Upon debugging it is clear that I am getting the correct element id in <code>ansList[k]</code> i.e. <code>Answer1</code>.
  Now the problem is, every time, whether the <code>Answer1</code> is checked or not <code>ele.checked</code> is returning <code>false</code>.
  What could be the reason?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>I think it would better to put complete code. So here it is:</p>
  
  <pre><code>&lt;div id="replaceAble1"&gt;
      &lt;span  style="font-size: 14pt ;margin-top: 5px;"&gt;Q 
          &lt;span id ="question1"&gt;Do you live in Pakistan?&lt;/span&gt;
      &lt;/span&gt;
      &lt;div  style="margin-top: 30px; height: 270px;"&gt;
          &lt;input id="Answer1" type="radio" name="Answers" title="True" onclick="setAnswered();"/&gt;True&lt;br/&gt;
          &lt;input type="radio" name="Answers" title="False" onclick="setAnswered();" /&gt;False
      &lt;/div&gt;
      &lt;div id="replaceAble1_a" style="display: none;"&gt;Answer1&lt;/div&gt;
      &lt;div id="replaceAble1_n" style="display: none;"&gt;null&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="replaceAble2" style="display: none;"&gt;
      &lt;span  style="font-size: 14pt ;margin-top: 5px;"&gt;Q. 
          &lt;span id ="question2"&gt;Do you go for cycling daily?&lt;/span&gt;
      &lt;/span&gt;
      &lt;div  style="margin-top: 30px; height: 270px;"&gt;
          &lt;input type="radio" name="Answers" title="True" onclick="setAnswered();" /&gt;True&lt;br/&gt;
          &lt;input id="Answer2" type="radio" name="Answers" title="False" onclick="setAnswered();" /&gt;False
      &lt;/div&gt;
      &lt;div id="replaceAble2_a" style="display: none;"&gt;Answer2&lt;/div&gt;
      &lt;div id="replaceAble2_n" style="display: none;"&gt;null&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="replaceAble3" style="display: none;"&gt;
      &lt;span  style="font-size: 14pt ;margin-top: 5px;"&gt;Q 
          &lt;span id ="question3"&gt;When Do you Sleep?&lt;/span&gt;
      &lt;/span&gt;
      &lt;div  style="margin-top: 30px; height: 270px;"&gt;
          &lt;input id="notAnswer1" type="checkbox" name="Answers" title="True" onclick="setAnswered();"/&gt;Morning&lt;br/&gt;
          &lt;input id="notAnswer2" type="checkbox" name="Answers" title="False" onclick="setAnswered();" /&gt;Evening&lt;br/&gt;
          &lt;input id="Answer3" type="checkbox" name="Answers" title="False" onclick="setAnswered();" /&gt;Night                        
      &lt;/div&gt;
      &lt;div id="replaceAble3_a" style="display: none;"&gt;Answer3&lt;/div&gt;
      &lt;div id="replaceAble3_n" style="display: none;"&gt;notAnswer1,notAnswer2&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="replaceAble4" style="display: none;"&gt;
      &lt;span  style="font-size: 14pt ;margin-top: 5px;"&gt;Q 
          &lt;span id ="question4"&gt;What Do you Eat?&lt;/span&gt;
      &lt;/span&gt;
      &lt;div  style="margin-top: 30px; height: 270px;"&gt;
          &lt;input id="Answer4" type="checkbox" name="Answers" title="False" onclick="setAnswered();" /&gt;Launch&lt;br/&gt;
          &lt;input id="Answer5" type="checkbox" name="Answers" title="False" onclick="setAnswered();" /&gt;Break Fast&lt;br/&gt;
          &lt;input id="Answer6" type="checkbox" name="Answers" title="False" onclick="setAnswered();" /&gt;Dinner&lt;br/&gt;
      &lt;/div&gt;
      &lt;div id="replaceAble4_a" style="display: none;"&gt;Answer4,Answer5,Answer6&lt;/div&gt;
      &lt;div id="replaceAble4_n" style="display: none;"&gt;null&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the script is:</p>
  
  <pre><code>var i = 0;
  var answered = false;
  var score = 0;
  var unitScore = 5;
  var totalScore = 20;
  var frameList = ["replaceAble1", "replaceAble2", "replaceAble3", "replaceAble4"];
  function setAnswered() {
      answered = true;
  }
  function displayAnswer(isTimeUp) {
      var Message;
      var j;
      if (isTimeUp) {
          Message = "Times Up";
      } else {
          Message = "Quiz End";
      }
  
      for (j = 0; j &lt; frameList.length; j++) {
          var result = true;
          var thisFrame = frameList[j];
          var ansList = document.getElementById(thisFrame + "_a").innerHTML.split(",");
          for (var k = 0; k &lt; ansList.length; k++) {
              var ele =  document.getElementById(ansList[k]);
              result = result &amp; ele.checked ;
          }
          ansList = document.getElementById(thisFrame + "_n").innerHTML.split(",");
          for (var k = 0; k &lt; ansList.length; k++) {
              if (ansList[k] !== "null")
                  result = result &amp; (!document.getElementById(ansList[k]).checked);
          }
          if (result) {
              score = Number(score) + Number(unitScore);
          }
      }
      document.getElementById("QuestionPan").style.display = "none";
      document.getElementById("resultPan").style.display = "block";
      document.getElementById("message").innerHTML = Message;
      document.getElementById("totalMarks").innerHTML = totalScore;
      document.getElementById("score").innerHTML = score;
      var timetaken = count - document.getElementById("time").innerHTML;
      document.getElementById("timetaken").innerHTML = timetaken + " minutes";
  }
  function submition() {
      if (!answered) {
          alert("Please select at least one Answer for this question.");
          return;
      }
      if (i === (frameList.length - 1)) {
          displayAnswer(false);
          return;
      }
      document.getElementById(frameList[i++]).style.display = "none";
      document.getElementById(frameList[i]).style.display = "block";
      document.getElementById("counter").innerHTML = (Number(i) + 1) + '/' + frameList.length;
      answered = false;
  }
  </code></pre>
  
  <p>Only the first answer i.e. <code>Answer1</code> is causing this problem. Every thing else is working fine.</p>