Javascript 在表单提交时重新加载页面后防止复选框值移动

我已经创建了一个表单，如果出现错误，可以重新加载，如果提交成功，可以转到其他页面

我不希望用户在出现错误时一次又一次地填充所有值，所以我将它们存储在会话变量中，并将它们填充回表单中

以下是表单的HTML：

<form action="preference.php" method="post">
<input id="optiona-cb" name="userpref[]" type="checkbox" value="optiona" <?php if((isset($_SESSION['userpref'][0]) && $_SESSION['userpref'][0])) { echo 'checked'; } ?>/>
<label for="optiona-cb">optiona</label>
<input id="optionb-cb" name="userpref[]" type="checkbox" value="optionb" <?php if((isset($_SESSION['userpref'][1]) && $_SESSION['userpref'][1])) { echo 'checked'; } ?>/>
<label for="optionb-cb">optionb</label>
<input id="optionc-cb" name="userpref[]" type="checkbox" value="optionc" <?php if((isset($_SESSION['userpref'][2]) && $_SESSION['userpref'][2])) { echo 'checked'; } ?>/>
<label for="optionc-cb">optionc</label>
... More Input Fields
</form>

在页面重新加载时，正确填写

用户名

和

电子邮件

值。但是，复选框的值会发生变化。例如，如果用户仅检查

optionc

，则在重新加载时会检查值

optiona

。类似地，如果用户检查

optiona

和

optionc

，则会检查值

optiona

和

optionb

换言之，在重新加载页面时，勾选复选框中的“洞”会被填满。如何确保复选框值不会移动以填充空值

我正在使用WordPress，如果这很重要的话。：）

一些澄清：

复选框值存储在

userpref[]

中，并使用

$\u POST['userpref']

访问。我不知道浏览器如何使用

$\u POST

传递有关选中复选框的信息

假设用户选中第一个和第三个复选框。还假设

userpref[]

为每个选中的复选框存储

1

，为每个未选中的复选框存储

0

。在这种情况下，该值将为[1,0,1]

一旦我将这些值存储在

$\u会话['userpref']

中，它们似乎会移动。换句话说，数组变成类似于[1,1,0]或[1,1]的东西，并且没有第三个值意味着复选框未选中

因此，不要在重新加载时选中第一个和第三个复选框。浏览器将检查第一个和第二个。第三个复选框保持未选中状态

---

我的问题是，我该怎么做才能确保复选框保持其选中-取消选中状态，并且不会移动以填充“洞”或“0”。

我认为

userpref

abc=>000001、010、011、100、101、110、111（8件事）

您应该提交

userpref

optiona+optionb+optionc=>“abc”如“010”

所以，我认为你使用

substr($_POST['userpref'], 0, 1), 
substr($_POST['userpref'], 1, 1),
substr($_POST['userpref'], 2, 1)

你可以这样做

<input id="userpref" name="userpref" type="hidden" />
handleSubmit() {
    //...

    const a = $("#optiona").prop("checked") ? "1" : "0";
    const b = $("#optionb").prop("checked") ? "1" : "0";
    const c = $("#optionc").prop("checked") ? "1" : "0";
    $("#userpref").val(a+b+c);

    //...
    window.document.forms[0].submit();
}

handleSubmit（）{
//...
常数a=$（“#选项a”）.prop（“选中”）？“1”：“0”；
常量b=$（“#选项b”）.prop（“选中”）？“1”：“0”；
常量c=$（“#optionc”）.prop（“选中”）？“1”：“0”；
$（“#userpref”）.val（a+b+c）；
//...
window.document.forms[0].submit（）；
}

像这样测试您的值：

<input id="optiona-cb" name="userpref[]" type="checkbox" value="optiona" 
  <?php if (in_array('optiona', $_SESSION['userpref'])) echo 'checked' ?> />

---

问题在于，在从浏览器提交复选框时，您试图根据索引获取复选框的相应“开/关”。那么，当您只选择索引0和2的复选框时会发生什么？只有这2个将被提交，比如
userpref[]=optiona&userpref[]=optionc
，现在您在数组中只有2个位置，那么将选中前2个复选框

基本上，它不是一个正确的匹配，因此您应该根据复选框值进行验证

另一点需要说明的是，如果没有选中任何复选框，那么下面的行将是一个问题
$\u SESSION['userpref']=$\u POST['userpref']

祝你好运
 event.preventDefault（）|编辑：哦，nvm我读错了。抱歉，这可能没有帮助。只有在实际选中复选框时，才会将其提交给PHP。这些信息应该能解释你的想法issue@RiggsFolly这就是我在重新加载时正确检查复选框的依据。我将在问题中添加更多解释。谢谢@Jeto.）这就是我在读了一些文章之后所做的。你的解释更清楚了。评论仍然让人困惑（可能措辞不恰当）。嘿@daniel.）如果没有选中复选框，
$\u POST['userpref']
，因此
$\u SESSION['userpref']
不就是空的吗？谢谢@daniel.）您好@Noobie，返回给
$\u SESSION['userpref']
的值将为NULL，但由于您正在访问一个未设置的密钥，因此将引发一个通知，这不是什么大问题，但我会避免。我建议您检查
$\u POST['userpref']
以查看是否已设置，如果未设置，只需将
$\u SESSION['userpref']
设置为空数组，这样以后如果您决定循环所有项，就不会因为尝试在空值上执行而出错。
<input id="optiona-cb" name="userpref[]" type="checkbox" value="optiona" 
  <?php if (in_array('optiona', $_SESSION['userpref'])) echo 'checked' ?> />