如何通过AJAX将选中复选框的ID与文本提交至PHP？

我来帮你搞定这个问题！你遇到的serialize()无效的核心原因是复选框缺少name属性——表单序列化是依赖name而非class或id来识别字段的。咱们一步步来解决：

第一步：修正HTML结构 #

先给复选框补上关键的name属性（要传多个值的话，用数组形式name="checkBox[]"），同时用<label>包裹复选框和文本，提升用户体验（点击文本也能选中复选框）：

<form class="myform" id="myform" action="add.php"> 
  <label><input type="checkbox" name="checkBox[]" id="1" value="1"> 1</label>
  <label><input type="checkbox" name="checkBox[]" id="2" value="2"> 2</label>
  <label><input type="checkbox" name="checkBox[]" id="3" value="3"> 3</label>
  <input type="submit" class="add" id="add" name="add"> 
</form>

第二步：编写AJAX提交逻辑 #

这里提供两种方案，你可以根据需求选择：

方案一：用serialize()快速实现（修正HTML后可用） #

现在复选框有了name，serialize()就能正确捕获选中项了。我们只需要阻止表单默认提交，用AJAX发送序列化后的表单数据：

// 原生JS版本
document.getElementById('myform').addEventListener('submit', function(e) {
  // 阻止表单默认跳转行为
  e.preventDefault();
  
  // 序列化表单数据（自动只包含选中的复选框）
  const formData = new FormData(this);
  
  // 发送AJAX请求
  fetch('add.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.text())
  .then(data => {
    console.log('提交成功：', data);
    // 这里可以加提交后的用户提示，比如弹窗或页面反馈
  })
  .catch(error => {
    console.error('提交失败：', error);
  });
});

如果你用jQuery，代码会更简洁：

$('#myform').on('submit', function(e) {
  e.preventDefault();
  const formData = $(this).serialize();
  $.post('add.php', formData, function(data) {
    console.log('提交成功：', data);
  });
});

方案二：手动构建包含ID和文本的自定义数据 #

如果你需要明确发送每个选中项的id和对应文本（而不只是value），可以手动遍历选中的复选框来构建数据对象：

document.getElementById('myform').addEventListener('submit', function(e) {
  e.preventDefault();
  
  // 获取所有选中的复选框
  const checkedBoxes = document.querySelectorAll('input[name="checkBox[]"]:checked');
  // 构建包含ID和文本的数组
  const selectedItems = Array.from(checkedBoxes).map(box => ({
    id: box.id,
    text: box.nextSibling.textContent.trim() // 提取复选框旁边的文本内容
  }));
  
  // 以JSON格式发送数据
  fetch('add.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ selected: selectedItems })
  })
  .then(response => response.text())
  .then(data => {
    console.log('提交成功：', data);
  })
  .catch(error => {
    console.error('提交失败：', error);
  });
});

对应的PHP接收代码（add.php）：

<?php
// 接收JSON格式的数据
$input = file_get_contents('php://input');
$data = json_decode($input, true);

// 获取选中的项数组
$selectedItems = $data['selected'] ?? [];

// 这里可以处理数据，比如存入数据库或返回响应
foreach($selectedItems as $item) {
  echo "ID: {$item['id']}, 文本: {$item['text']}\n";
}
?>

关键说明 #

• 之前serialize()返回空的原因：表单元素必须有name属性才能被序列化识别，你的原代码里复选框只有class和id，所以无法被捕获。
• 如果用方案一的序列化方式，PHP端可以直接通过$_POST['checkBox']拿到选中的value数组。

内容的提问来源于stack exchange，提问作者ahhfzrx