防止表单提交后重置多个具有相同名称的复选框答案

【问题标题】：Prevent multiple checkboxes with same name from getting reset after form submit防止表单提交后重置多个具有相同名称的复选框
【发布时间】：2019-01-15 18:08:16
【问题描述】：

我有多个类/组的复选框，每个类/组都包含多个具有相同名称的复选框。提交表单后，所有复选框都会重置。我已经尝试了该站点上提供的许多解决方案，但这些解决方案不适用于复选框组。例如：-

<form method="post" action="" name="SearchForm"   >

  <input type="checkbox" name="color[]" value="Black">
  <input type="checkbox" name="color[]" value="White">
  <input type="checkbox" name="color[]" value="Green">

  <input type="checkbox" name="language[]" value="Punjabi">
  <input type="checkbox" name="language[]" value="Sindhi">
  <input type="checkbox" name="language[]" value="Saraiki">

</form>

如何防止复选框在表单提交后被重置？

【问题讨论】：

要么通过 XHR 提交表单，因此不需要加载整个页面，要么只查询数据库并在页面重新加载时恢复值。

标签： javascript php jquery html

【解决方案1】：

发送表单时，页面会重新加载，因此文档中的所有更改都将丢失。但是你可以用 PHP 轻松地做到这一点：

<form method="post" action="" name="SearchForm">

  <input type="checkbox" name="color[]" value="Black" <?php echo $_POST['color'][0]?'checked="checked"':'';?>>
  <input type="checkbox" name="color[]" value="White" <?php echo $_POST['color'][1]?'checked="checked"':'';?>>
  <input type="checkbox" name="color[]" value="Green" <?php echo $_POST['color'][2]?'checked="checked"':'';?>>

  <input type="checkbox" name="language[]" value="Punjabi" <?php echo $_POST['language'][0]?'checked="checked"':'';?>>
  <input type="checkbox" name="language[]" value="Sindhi" <?php echo $_POST['language'][1]?'checked="checked"':'';?>>
  <input type="checkbox" name="language[]" value="Saraiki" <?php echo $_POST['language'][2]?'checked="checked"':'';?>>

</form>

这样的事情应该可以工作。

希望对你有帮助！

【讨论】：

@sajjadali 你有什么错误吗？您是否使用短开标签（我现在替换了它们）？或者您可以使用 AJAX 来完成，而无需重新加载页面...

【解决方案2】：

要防止复选框被清除，您可以使用 preventDefault 方法。但随后您将负责自己处理表单数据。
这可能是这样的：

<form method="post" action="" name="myForm"   >    
  <input class="color" type="checkbox" name="color[]" value="Black"> // Class matches name
  <input class="color" type="checkbox" name="color[]" value="White">
  <input class="color" type="checkbox" name="color[]" value="Green">    
  <input class="language" type="checkbox" name="language[]" value="Punjabi">
  <input class="language" type="checkbox" name="language[]" value="Sindhi">
  <input class="language" type="checkbox" name="language[]" value="Saraiki">
  <!-- The onclick attribute calls our processForm function -->
  <input type="submit" onclick="processForm(event)" value="Submit" />
</form>  

<script>
    function processForm(event) {
      event.preventDefault(); // Keeps the form from being submitted/cleared
      let checkedColorBoxes = document.querySelectorAll(".color:checked"); // Find checked boxes
      let checkedLanguageBoxes = document.querySelectorAll(".language:checked");
      // Store the values from the checked boxes 
      let selectedColors = [], selectedLanguages = [];
      for(let i = 0; i < checkedColorBoxes.length; i++){
        selectedColors.push(checkedColorBoxes[i].value); 
      }
      for(let i = 0; i < checkedLanguageBoxes.length; i++){
        selectedLanguages.push(checkedLanguageBoxes[i].value); 
      }
      // Now we have the values that would have been submitted, and can do what we like with them
      // If nothing better comes to mind, one (very kludgy) option is to populate another (hidden) 
      //   form with them and secretly submit that.
      console.log(`colors: ${selectedColors}`);
      console.log(`languages: ${selectedLanguages}`);         
    }
</script>

另一种方法是监听复选框何时更改并跟踪其状态（选中或未选中）。然后，在 processForm() 中，您可以跳过 preventDefault() 调用，只需以编程方式重新选中相应的框。

【讨论】：