复选框勾选/取消时AJAX提交数据无响应，求技术排查

我来帮你一步步梳理这个问题，你的代码里有几个容易忽略的小问题，还有一些关键的调试点，咱们逐个解决：

1. 修复未定义的event变量 #

你的点击事件回调里用了event.preventDefault()，但没有把event作为参数传入函数，这会直接触发JS报错，导致整个代码执行中断。修改成这样：

$('input[type="checkbox"]').on('click', function(event) { // 这里补上event参数
  event.preventDefault();
  // 后续代码...
});

不过多说一句：复选框的默认行为（切换勾选状态）其实不需要阻止，删掉这行event.preventDefault()反而更符合用户预期——不然用户点击后复选框状态没变化，反而会困惑。

2. 限定表单元素范围，避免序列化冗余内容 #

你用$(":input,:hidden").serialize()会序列化页面上所有输入/隐藏元素，很容易混入无关数据。应该只序列化当前复选框所在的表单：

var formData = $(this).closest('form').serialize();

这样只会处理planning表单内的元素，不会干扰其他页面内容。

3. 处理复选框未勾选时的参数缺失问题 #

默认情况下，serialize()不会包含未勾选的复选框，这意味着用户取消勾选时，后端可能收不到dkw参数。可以手动补全这个逻辑：

var $checkbox = $(this);
var formData = $checkbox.closest('form').serialize();
// 未勾选时手动添加参数，设为0
if (!$checkbox.is(':checked')) {
  formData += (formData ? '&' : '') + 'dkw=0';
}

这样不管勾选还是取消，后端都能拿到明确的dkw取值（1或0）。

4. 添加AJAX错误处理，排查请求失败原因 #

你的AJAX只有success回调，没有错误处理，就算请求失败也看不到任何提示。加上错误回调方便调试：

$.ajax({
  type: "POST",
  url: "mpt_planningen_overzicht.update.php",
  data: formData,
  success: function(result) {
    $("#resultaat").html(result);
  },
  error: function(xhr, status, error) {
    // 在控制台打印错误信息，方便定位问题
    console.error('AJAX请求失败:', status, error);
    console.error('后端响应内容:', xhr.responseText);
  }
});

然后打开浏览器开发者工具（按F12），切换到Console标签看报错，再到Network标签查看请求的状态码、参数和响应，确认后端是否正确接收并处理了请求。

5. 验证后端脚本的可用性 #

最后要确认mpt_planningen_overzicht.update.php的路径是否正确，文件本身有没有语法错误，是否能正常处理POST请求并返回内容。可以直接用浏览器访问这个文件，或者用调试工具发送POST请求，测试它的响应是否符合预期。

调整后的完整JS代码参考：

$(document).ready(function() {
  $('input[type="checkbox"]').on('click', function() {
    var $checkbox = $(this);
    var formData = $checkbox.closest('form').serialize();
    if (!$checkbox.is(':checked')) {
      formData += (formData ? '&' : '') + 'dkw=0';
    }
    $.ajax({
      type: "POST",
      url: "mpt_planningen_overzicht.update.php",
      data: formData,
      success: function(result) {
        $("#resultaat").html(result);
      },
      error: function(xhr, status, error) {
        console.error('AJAX请求失败:', status, error);
        console.error('后端响应内容:', xhr.responseText);
      }
    });
  });
});

内容的提问来源于stack exchange，提问作者Rick A.