<form id="exampleForm" method="post">
<input type="text" name="name" id="name" value="Example value" required >
<input type="checkbox" name="group[]" id="checkbox1" value="0" checked>
<input type="checkbox" name="group[]" id="checkbox2" value="1" >
<input type="checkbox" name="group[]" id="checkbox3" value="2" >
<button type="reset" id="resetForm">Reset</button>
<button type="submit">Submit</button>
</form>
const form = document.querySelector("#exampleForm");
const checkbox3 = document.querySelector("#checkbox3");

checkbox3.indeterminate = true;

for (const element of form.elements) {
  if (
    element.type === "checkbox" &&
    typeof element.indeterminate === "boolean"
  ) {
    element.dataset.originalIndeterminate = String(element.indeterminate);
  }
}

const resetFormButton = document.querySelector("#resetForm");

const resetForm = (event) => {
  const targetForm = event.target.form;

  for (const element of targetForm.elements) {
    if (element.type === "checkbox") {
      element.indeterminate =
        element.dataset.originalIndeterminate === "true" || false;
    }
  }
};

resetFormButton.addEventListener("click", resetForm);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.