如何获取所有选中checkbox值存入数组，通过urlencoded.append POST到API

1 修正HTML代码 #

你当前HTML存在id重复的问题，同一页面内id属性不能重复，而且原JS中调用的document.getElementById("type")也不存在对应元素，修正后代码如下：

<div id="myDiv">
  <input type="checkbox" name="name" value="1">
  <label>Food Deals</label>
  <br>
  <input type="checkbox" name="name" value="2">
  <label>Groceries Deals</label>
  <br>
  <input type="checkbox" name="name" value="3">
  <label>Karam Box</label>
  <br>
</div>

2 调整JavaScript代码 #

逻辑分为三步：获取所有选中的checkbox、提取值生成数组、将数组内容追加到urlencoded对象中，根据后端接收参数的格式可以选择两种传参方式：

// 获取所有已选中的checkbox元素
const checkedItems = document.querySelectorAll('#myDiv input[name="name"]:checked');
// 提取value存入数组
const typeIdArr = Array.from(checkedItems).map(item => item.value);

// 方式1：后端接收逗号分隔的id字符串，直接追加单个参数
urlencoded.append("typeID", typeIdArr.join(','));

// 方式2：后端接收数组格式参数，逐个追加同名字段
// typeIdArr.forEach(id => {
//   urlencoded.append("typeID[]", id);
// });

如果后端要求其他格式的参数，修改typeIdArr的处理逻辑即可。

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