如果未选中，则设置复选框输入的值答案

【问题标题】：Setting the value of a checkbox input if not checked如果未选中，则设置复选框输入的值
【发布时间】：2018-08-09 16:58:43
【问题描述】：

我正在尝试根据复选框输入是否被选中来更改复选框输入的值。这是我所拥有的：

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。但是，如果我取消选中它，那么该值将保持为真。

【问题讨论】：

标签： javascript html

【解决方案1】：

你已经够近了：

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

&lt;input type="checkbox" id="chkPrint" name="Print" value="false" onclick="myFunction()"&gt;

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

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 */
  });
});

&lt;input type="checkbox" name="item" /&gt;&lt;input type="checkbox" name="item" /&gt;&lt;input type="checkbox" name="item" checked=''/&gt;&lt;input type="checkbox" name="item" /&gt;

【讨论】：

【解决方案2】：

首先在每次点击时将 chkPrint 值设为 false，如果选中则仅设为 true。

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

【讨论】：

【解决方案3】：

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

https://www.w3schools.com/jsref/event_onchange.asp

或者您可以简单地将这些函数合并并分配给 Event onchange。

如果您正在处理来自表单的服务器端值。请对此进行大量讨论。 Does <input type="checkbox" /> only post data if it's checked?

【讨论】：

【解决方案4】：

<input type="checkbox" id="chkPrint" name="Print" value="false" onclick="myFunction();yourFunction()">
<script>
function myFunction() {
            var chkPrint = document.getElementById("chkPrint");
            if (chkPrint.checked == true) {
                chkPrint.value = "true";
                console.log(chkPrint.value)
            }
        }
function yourFunction() {
  if (document.getElementById("chkPrint").checked == false) {
     document.getElementById("chkPrint").value = "false";
      console.log(chkPrint.value)
  }
}

</script>

这是因为您在点击事件时仅调用了一个函数“myFunction()”，而您默认调用了另一个函数。您需要调用这两个函数，以便它检查真假。

但这可以像这样轻松优化

<input type="checkbox" id="chkPrint" name="Print" value="false" onclick="myFunction()">
<script>
function myFunction() {
            var chkPrint = document.getElementById("chkPrint");
            if (chkPrint.checked == true) {
                chkPrint.value = "true";
                console.log(chkPrint.value)
            }
            else{
             document.getElementById("chkPrint").value = "false";
                         console.log(chkPrint.value)
            }
        }


</script>

【讨论】：

为什么不在else 子句中使用chkPrint 变量？
可以的，只是我只用了他的代码。

【解决方案5】：

如果我理解你的问题，我认为这段代码会解决你的问题。

function myFunction(self){
  if(self.checked == true){
      self.value = true;
    }else{
       self.value = false;
    }
}

&lt;input type="checkbox" id="chkPrint" name="Print" value="false" onclick="myFunction(this)"&gt;

【讨论】：

【解决方案6】：

此代码将起作用：

<!DOCTYPE html>
<html>
<body>

Checkbox: <input type="checkbox" id="myCheck" onclick="check()">


<script>
function check() {
    if (document.getElementById("myCheck").checked){

      document.getElementById("myCheck").checked = true;
      alert ("Checked and Value is -->"+document.getElementById("myCheck").checked);
    }
    else
    {
      document.getElementById("myCheck").checked = false;
      alert ("Unchecked and Value is -->"+document.getElementById("myCheck").checked);
    }
}


</script>

</body>
</html>

【讨论】：

你应该解释你做了什么，让别人明白问题是什么。

【解决方案7】：

只需将事件更改为onchange，并检查目标值

function myFunction() {
    this.event.target.value = this.event.target.checked;    
 }

&lt;input type="checkbox" id="chkPrint" name="Print" value="false" onchange="myFunction()"&gt;

【讨论】：