如何获取名称为数组形式的复选框值并通过Fetch提交？

我来帮你搞定这个问题！你遇到的Uncaught TypeError错误，是因为event.target.checkBoxName并不是单个DOM元素，而是一组同名的复选框集合，直接访问.value自然会报错，而且JavaScript里也不支持checkBoxName[]这种语法来获取元素。下面咱们一步步来解决：

1. 正确读取选中的复选框值 #

要获取所有被选中的复选框值，你可以通过选择器筛选出选中的元素，再提取它们的value属性。这里有两种常用方法：

方法一：使用querySelectorAll筛选选中项 #

handleSubmit = event => {
  event.preventDefault();
  
  // 筛选出所有name为checkBoxName[]且被选中的复选框
  const checkedBoxes = event.target.querySelectorAll('input[name="checkBoxName[]"]:checked');
  
  // 将NodeList转为数组，再提取每个复选框的value
  const checkBoxValues = Array.from(checkedBoxes).map(box => box.value);
  
  // 查看选中的值组成的数组（比如选中1和3的话，会输出 ["1", "3"]）
  console.log("选中的复选框值：", checkBoxValues);
}

方法二：通过表单元素集合获取 #

你也可以直接通过表单的elements属性获取所有同名复选框，再过滤出选中的：

handleSubmit = event => {
  event.preventDefault();
  
  // 获取所有name为checkBoxName[]的复选框
  const allCheckBoxes = event.target.elements['checkBoxName[]'];
  
  // 过滤出选中的，并提取value
  const checkBoxValues = Array.from(allCheckBoxes)
    .filter(box => box.checked)
    .map(box => box.value);
  
  console.log("选中的复选框值：", checkBoxValues);
}

2. 用Fetch提交到后端 #

拿到选中的值数组后，就可以把它放到请求体里提交给后端了。注意如果用application/json格式，要把数组转成JSON字符串：

handleSubmit = event => {
  event.preventDefault();
  
  // 获取选中的复选框值数组
  const checkedBoxes = event.target.querySelectorAll('input[name="checkBoxName[]"]:checked');
  const checkBoxValues = Array.from(checkedBoxes).map(box => box.value);
  
  // 查看将要传给服务器的数组格式（直接打印JSON字符串更直观）
  console.log("将要发送给后端的数据：", JSON.stringify({ checkBox: checkBoxValues }));
  
  // 发送Fetch请求
  fetch('/你的后端接口地址', {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      // 如果后端需要CSRF令牌，记得在这里添加，比如：
      // "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content
    },
    body: JSON.stringify({
      checkBox: checkBoxValues // 把数组作为请求体的一部分
    })
  })
  .then(response => {
    console.log("响应状态：", response);
    if (response.ok) { // response.ok 包含200-299的成功状态码
      console.log('提交成功！');
      return response.json(); // 解析后端返回的JSON数据
    } else {
      throw new Error('请求失败');
    }
  })
  .then(data => {
    console.log("后端返回的数据：", data);
  })
  .catch(error => {
    console.error("请求错误：", error);
    alert('服务器错误，请稍后重试');
  });
}

关键说明 #

• 为什么之前的代码报错：当表单中有多个同名元素时，event.target.元素名会返回一个HTMLCollection（元素集合），而不是单个元素，所以直接访问.value会报错；同时JavaScript不允许用checkBoxName[]这种带括号的语法来访问属性，必须用字符串形式的键（比如elements['checkBoxName[]']）。
• 如果后端期望的是表单格式（application/x-www-form-urlencoded），你可以用FormData来提交，它会自动处理复选框的数组格式：

  const formData = new FormData(event.target);
  // FormData会把选中的复选框值以checkBoxName[]为键、数组为值提交
  fetch('/你的接口', { method: 'POST', body: formData });
  

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