JavaScript 更改文本框的值答案

【问题标题】：JavaScript to change value of textboxJavaScript 更改文本框的值
【发布时间】：2017-12-22 16:50:51
【问题描述】：

此代码用于取消订阅表单，我需要在初始启动时切换是否选中复选框，然后根据用户的选择更改值。

基本上，我通过我们的电子邮件平台将值传递到 html 中。如果值为I，则checkbox应勾选，取值为I。反之，如果值为O，则不勾选checkbox，取值为O。

为了将数据传回我们的电子邮件平台，我必须使用隐藏输入来捕获值，否则它实际上不会将 I 或 O 发回。

JavaScript，我在头部有一个标签（HTML 电子邮件）

var initValue = function() {
    var permStat = document.getElementById("emailPref").value
    if(permStat === "I"){
      document.getElementById("checkbox").checked = true;
    } else {
      document.getElementById("checkbox").checked = false;
    }
  }
  var changeValue = function(){
    var optValue = document.getElementById("checkbox").value;
    if(optValue === "I"){
      document.getElementById("checkbox").value = "O";
      document.getElementById("emailPref").value = "O";
      document.getElementById("checkbox").checked = false;
    } else {
      document.getElementById("checkbox").value = "I";
      document.getElementById("emailPref").value = "I";
      document.getElementById("checkbox").checked = true;
    }
  }

用于切换样式的可见标签（仅使用 CSS）

<input type="checkbox" id="checkbox" name="emailPerm" value="$EMAIL_PERMISSION_STATUS_$" onload="initValue();" onclick="changeValue()">
<label class="toggle" for="checkbox"></label>

还有隐藏的输入，将数据传回我们的电子邮件平台

<input type="hidden" id="emailPref" name="EMAIL_PERMISSION_STATUS_" value="$EMAIL_PERMISSION_STATUS_$">

其他信息

在加载 I 值时，它会显示如下（这将是“O”值）：

单击时，在此状态之后，值确实设置为“O”并且样式保持不变。第二次单击时，该值返回“I”并正确显示：

**如果这是一个明显的错误，我提前道歉，因为我通常不能在 HTML 电子邮件中使用 JavaScript，但由于这在技术上是作为登录页面呈现的，所以它可以工作。

谢谢！

【问题讨论】：

如果您使用来自服务器的数据设置隐藏输入，您不能简单地创建一个根据相同数据检查的输入吗？
@zfrisch 是的，这就是 initValue 函数的目标。它正在拉入那个值并且 supposed 正在调整选中的值，但它不是

标签： javascript checkbox input toggle

【解决方案1】：

问题是onload 不是复选框的有效属性。因此，您的 initValue 永远不会运行。在元素下方添加一个类似这样的脚本标签。

<script>
// self executing function here
(function() {
    initValue();
})();
</script>

【讨论】：