gpt4 book ai didi

javascript - 根据 HTML 表单中的用户操作处理选中和取消选中复选框

转载 作者:行者123 更新时间:2023-11-28 03:51:51 24 4
gpt4 key购买 nike

我需要通过使用 Javascript 在 HTML 表单中存储诸如 - 复选框激活/停用之类的值来处理复选框状态。在初始表单加载期间,不应捕获复选框状态。仅当用户选择和取消选择状态时才应存储状态,并且应在重新访问表单时显示存储的值。我正在使用下面的代码,但它总是显示状态 - 已停用,因为我的代码验证了它。如何处理这种情况?

<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function Updater() {
var strOldText = document.getElementById("store").value;
var strTexttoAdd = document.getElementById("commentsArea").value;
var currentDate = new Date();
var hours = currentDate.getHours();
var minutes = currentDate.getMinutes();
var strDate = (currentDate.getMonth() + 1) + "/" + currentDate.getDate() + "/" + currentDate.getFullYear();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
var strTime = strDate + ' ' + hours + ':' + minutes + ' ' + ampm;
var UserName = document.getElementById("CurrentUserRealName").value;
var strNewLine = "<b>" + strTime + "</b>" + " - " + status + UserName +"<br>" + strTexttoAdd + "<p>";
var strNewStore = strNewLine + strOldText;
document.getElementById('store').value = strNewStore;
document.getElementById("commentsArea").value = "";
document.getElementById("hi_chbox_payment").value;
if(document.getElementById("chbox_payment").checked)
{
document.getElementById("hi_chbox_payment").value="YES";
}
else
{
document.getElementById("hi_chbox_payment").value="NO";
}
}
</script>
</head>
<body bgcolor="#FFFFCC">
<form method=post onsubmit="Updater()" name="NoteForm">
<input type="hidden" id="store" name="store">
<input type="hidden" id="INPUT" name="INPUT">
<input type="hidden" id="hi_chbox_payment" name="hi_chbox_payment">
<input type="hidden" name="Itemnum" value="">
<input type="hidden" id="CurrentUserName" name="CurrentUserRealName" />
<input type="hidden" name="OBDocumentType" value="1978">
<p><font color="#000000" size="6">Instructions</font></p>
Instructions Apply <input type="checkbox" id="chbox_payment">
<input type=submit value=Save name=OBBtn_Yes> <br>
<br>

<hr style="width:600px; text-align:left">
<textarea id="commentsArea" rows=8 cols=72 value></textarea>
<p><hr style="width:600px; text-align:left"><p>
<table width="600">
<tr>
<td>
<font color=#000000>
<script>
document.write(document.getElementById('store').value);
if(document.getElementById("hi_chbox_payment").value=="YES")
{
document.getElementById("chbox_payment").checked = true;
var status = "Checkbox Activated by : " ;
}
else
{
document.getElementById("chbox_payment").checked = false;
status = "Checkbox De-Activated by : " ;
}
</script>
</font>

</td>
</tr>
</table>
</form>
</body>

最佳答案

这似乎可以使用本地存储。尝试下面的 fiddle https://jsfiddle.net/ne9mzw57/3/

当您第一次进入时,它什么也没说(本地存储为空。)单击显示已激活的复选框。离开该页面并返回该页面,它仍然显示处于事件状态。

取消选中它,它会显示已停用。离开该页面并返回该页面,它仍然显示已停用。

$(document).ready(function() {
processCheckbox();
$('#checkbox1').change(function() {
if ($(this).is(":checked")) {
localStorage.setItem("checkbox", "YES");
} else {
localStorage.setItem("checkbox", "NO");
}
processCheckbox();
});
});

function processCheckbox() {
if (localStorage.checkbox) {
if (localStorage.checkbox === 'YES') {
$('#div1').text('Activated')
$('#checkbox1').attr('checked', true);
} else {
$('#div1').text('Deactivated')
}
}
}

关于javascript - 根据 HTML 表单中的用户操作处理选中和取消选中复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47930786/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com