防止表单提交后重置多个同名复选框

Question

我有多个类/组的复选框，每个类/组包含多个同名复选框。提交表单时，所有复选框都会重置。我在这个网站上尝试了很多解决方案，但这些都不适用于复选框组。例如：-

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

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

Answer 1

要防止清除复选框，可以使用预防默认方法。但是你将负责自己处理表单数据。
这可能是这样的：

<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（）调用，只需以编程方式重新选中相应的框。

Answer 2

发送表单时，页面将重新加载，因此文档中的所有更改都将丢失。但是你可以很容易地用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>

像这样的东西应该会起作用。

我希望这将帮助你！