Question

I have multiple classes/groups of checkboxes and each class/group contain multiple checkboxes in it with same name. When form submitted, all checkboxes get reset. I have tried many solutions available on this site but these are not working for group of checkboxes. For example:-

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

How can I prevent checkboxes from getting reset after form submitted?

Answer 1

When the form sent, the page reloads, so all changes in the document will be lost. But you can easily do it with 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>

Something like this should work.

I hope that this will help you!

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

Prevent multiple checkboxes with same name from getting reset after form submit

2 个答案: