用于更改文本框值的JavaScript

时间:2017-12-22 16:50:51

标签: javascript checkbox input toggle

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

基本上,我通过电子邮件平台将值传递给html。如果值为I,则应选中复选框和值I.相反,如果值为O,则不应选中复选框,并且值为O。

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

JavaScript,我在头脑中作为标记(HTML电子邮件)

mousedown

用于切换样式的可见标签(仅使用CSS)

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

隐藏的输入,即将数据传回我们的电子邮件平台的输入

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

其他信息

在使用I值加载时,它显示为(这将是&#34; O&#34;值):

enter image description here

点击后,在此状态之后,该值设置为&#34; O&#34;造型保持不变。再次点击,该值将返回到&#34; I&#34;并正确显示:

enter image description here

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

谢谢!

1 个答案:

答案 0 :(得分:1)

问题是onload不是复选框的有效属性。因此,initValue永远不会运行。在元素下面添加一个脚本标记。

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