此代码用于取消订阅表单,我需要切换是否在初始启动时选中复选框,然后根据用户的选择更改值。
基本上,我通过我们的电子邮件平台将值传递给html。如果值为I,则应选中复选框和值I.相反,如果值为O,则不应选中复选框且值为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,但由于这在技术上是作为登录页面呈现的,因此它可以工作。
谢谢!
问题是onload
不是复选框的有效属性。因此,你的initValue
永远不会运行。在元素下面添加一个脚本标记。
<script>
// self executing function here
(function() {
initValue();
})();
</script>