Question

使用W3教程我有一些基本的javascript代码，它将返回表单中三个输入的值。我所要做的就是在选中复选框时更改复选框的value属性。如果选中，我想返回并显示true。如果没有，我希望它返回并显示false。复选框的默认值为false，即使选中该页面，我也能够始终返回false。我看了几个关于如何更改值但未能成功实现的示例。请告诉我如何调整代码，以便在选中复选框时将value属性更新为true。

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

您的代码存在两个问题，其中一个我在上面的评论中指出。另一个是document.querySelector('checkbox1')无效，因为checkbox1是名称属性。您可以改为使用document.querySelector('#check')通过其ID选择复选框，或document.querySelector('[name="checkbox1"]')通过名称属性选择复选框。

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

怎么样：

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;
}

希望能帮到你;）

如果选择，则更改值属性

2 个答案: