管理复选框的状态和提交

以下是一个示例代码，演示了如何管理复选框的状态和提交：

HTML代码：

<form id="myForm">
  <label for="checkbox1">
    <input type="checkbox" id="checkbox1" name="checkboxes" value="checkbox1"> Checkbox 1
  </label>
  <br>
  <label for="checkbox2">
    <input type="checkbox" id="checkbox2" name="checkboxes" value="checkbox2"> Checkbox 2
  </label>
  <br>
  <label for="checkbox3">
    <input type="checkbox" id="checkbox3" name="checkboxes" value="checkbox3"> Checkbox 3
  </label>
  <br>
  <button type="button" onclick="submitForm()">Submit</button>
</form>

JavaScript代码：

function submitForm() {
  var checkboxes = document.getElementsByName("checkboxes");
  var selectedCheckboxes = [];

  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      selectedCheckboxes.push(checkboxes[i].value);
    }
  }

  // 在这里可以执行提交操作，例如通过 AJAX 发送到服务器
  console.log("Selected checkboxes: " + selectedCheckboxes);
}

上述代码定义了一个submitForm函数，该函数在点击提交按钮时被调用。它首先使用document.getElementsByName获取所有名称为"checkboxes"的复选框元素，然后使用循环遍历这些复选框。在循环中，如果复选框是选中状态（即checked属性为true），则将其值添加到selectedCheckboxes数组中。

最后，你可以在submitForm函数中执行提交操作，例如通过 AJAX 将所选的复选框值发送到服务器。在示例中，我们只是在控制台打印所选复选框的值。

请注意，上述示例假设复选框具有相同的名称（"checkboxes"）。这样做是为了将它们视为同一组，并且可以在提交时一起处理。如果你的需求不同，可以相应地调整代码。