使用JS/AJAX提交不刷新的复选框

<form id="myForm">
  <input type="checkbox" id="checkbox1" name="checkbox1" value="value1"> Option 1
  <input type="checkbox" id="checkbox2" name="checkbox2" value="value2"> Option 2
  <input type="checkbox" id="checkbox3" name="checkbox3" value="value3"> Option 3
  <button type="button" onclick="submitForm()">Submit</button>
</form>

function submitForm() {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
  var values = [];
  for (var i = 0; i < checkboxes.length; i++) {
    values.push(checkboxes[i].value);
  }

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "submit.php", true);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 处理服务器响应
      var response = JSON.parse(xhr.responseText);
      // 更新页面或执行其他操作
    }
  };
  xhr.send(JSON.stringify(values));
}

<?php
// submit.php
$checkboxes = json_decode(file_get_contents('php://input'), true);
// 处理复选框值，例如存储到数据库或执行其他操作
// 返回响应
$response = array('status' => 'success', 'message' => 'Form submitted successfully');
echo json_encode($response);
?>