更改值属性（如果选中）

Question

Using W3 tutorials I have some basic javascript code that will return the values of three inputs from a form. All I'm trying to do is change the value attribute of a checkbox when it is selected. If it is checked, I'd like to return and display true. If not, I'd like it to return and display false. The default value of the checkbox is false, and I am able to get page to return false always even when it's checked. I have looked looked at several examples of how to change the value but have been unsuccessful in implementing it. Please let me know how I can adjust my code so that the value attribute will be updated to true when the checkbox is selected.

 function myFunction() { /* **Commented out part is what breaks the code** if (document.querySelector('checkbox1').checked) { document.getElementByID('check').value='true'; } else { document.getElementByID('check').value='false'; } */ var x = document.getElementById("frm1"); var text = ""; var i; for (i = 0; i < x.length; i++) { text += x.elements[i].value + "<br>"; } document.getElementById("demo").innerHTML = text; } 

 <form id="frm1" action="/action_page.php"> <input type="text" name="inString" value="Enter Text"> String Input<br> <input type="number" name="inNum">Number Input<br><br> <input type="checkbox" id="check" name="checkbox1" value="false"> Boolean Input<br><br> </form> <p>Click button to display the value of each element in the form.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> 

Answer 1

There are two issues with your code, one of which I pointed out in a comment above. The other is that document.querySelector('checkbox1') isn't valid as checkbox1 is a name attribute. You can instead use document.querySelector('#check') which selects the checkbox via its ID, or document.querySelector('[name="checkbox1"]') which selects it by the name attribute.

 function myFunction() { if (document.querySelector('#check').checked) { document.getElementById('check').value = 'true'; } else { document.getElementById('check').value = 'false'; } var x = document.getElementById("frm1"); var text = ""; var i; for (i = 0; i < x.length; i++) { text += x.elements[i].value + "<br>"; } document.getElementById("demo").innerHTML = text; } 

 <form id="frm1" action="/action_page.php"> <input type="text" name="inString" value="Enter Text"> String Input<br> <input type="number" name="inNum">Number Input<br><br> <input type="checkbox" id="check" name="checkbox1" value="false"> Boolean Input<br><br> </form> <p>Click button to display the value of each element in the form.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> 

Answer 2

What about:

function myFunction() {
  /* **Commented out part is what breaks the code**
  if (document.querySelector('checkbox1').checked) {
  document.getElementByID('check').value='true';
  }
  else {
  document.getElementByID('check').value='false';
  }
  */
  var x = document.getElementById("frm1");
  var text = "";
  var i;
  for (i = 0; i < x.length; i++) {
    // check if current input type is checkbox
    if( x.elements[i].type == 'checkbox' ){
    // if it is, get checked value
         text += x.elements[i].checked + "<br>"; // return true or false
    }else{
         text += x.elements[i].value + "<br>";
    }

  }
  document.getElementById("demo").innerHTML = text;
}

Hope that help you ;)