javascript - 如果未选中，则设置复选框输入的值

Question

我试图根据复选框输入是否选中来更改复选框输入的值。这是我所拥有的:

HTML:

<input type="checkbox" id="chkPrint" name="Print" value="false" onclick="myFunction()">

JavaScript:

function myFunction() {
  var chkPrint = document.getElementById("chkPrint");
    if (chkPrint.checked == true) {
      chkPrint.value = "true";
    }
  }
function yourFunction() {
  if (document.getElementById("chkPrint").checked == false) {
     document.getElementById("chkPrint").value = "false";
  }
}
yourFunction()

当我在 Chrome DevTools 中查看 HTML 时，我看到我的值更改为 true。但是，如果我取消选中它，那么该值将保持为 true。

Answer 1

你已经足够接近了:

function myFunction() {
  var chkPrint = document.getElementById("chkPrint");
  chkPrint.value = chkPrint.checked;
  console.log('value', chkPrint.value);
}
myFunction()

<input type="checkbox" id="chkPrint" name="Print" value="false" onclick="myFunction()">

尝试这个可以处理多个复选框的脚本:

let setValue = function(e) {
  this.value = this.checked;
  console.log('value', this.value);
};

document.addEventListener('DOMContentLoaded', function() {
  console.log('page loaded...');
  document.querySelectorAll('[name=item]').forEach(function(chk) {
    chk.addEventListener('click', setValue);
    setValue.bind(chk).call(); /* set true/false on page load */
  });
});

<input type="checkbox" name="item" /><input type="checkbox" name="item" /><input type="checkbox" name="item" checked=''/><input type="checkbox" name="item" />