jQuery提交表单时无法获取checkbox选中值的问题求解

根本原因 #

• 动态元素事件绑定失效：页面初始加载执行事件绑定代码时，接口还未返回、checkbox元素还没渲染到页面中，事件根本没有绑定到后续生成的checkbox上，选中操作不会触发更新fruit_temp数组的逻辑，所以提交时拿不到值。
• 可选注意项：FormData直接追加数组会默认转为逗号拼接的字符串，不符合多数后端接口接收数组的格式要求。

修复代码 #

JS代码修改 #

let fruit_temp = [];
$(document).ready(function() {
  // 改成事件委托，绑定到页面初始就存在的父级元素或者document上，动态生成的元素也能触发事件
  $(document).on('change', 'input[name="fruitGroup"]', function() {
    fruit_temp = [];
    $('input[name="fruitGroup"]:checked').each(function() {
      fruit_temp.push($(this).val());
    });
  });
});

const getFruitType = () => {
  axios.get(`${url}FruitList`)
    .then(function(response) {
      if (response.data.status == 'success') {
        response.data.result.map((e) => {
          $('#fruitlist').append(`<li><label class="checkbox"><input type="checkbox" name="fruitGroup" value="${e.id}" > ${e.name}</label></li>`);
        });
      }
    });
}

// 初始化页面时务必调用getFruitType()渲染checkbox列表，此处不要漏写
// getFruitType()

const submit = () => {
  let formData = new FormData();
  // 数组传递二选一即可，根据后端接收规则选择
  // 方案1：转成JSON字符串传递，后端接收后解析JSON即可拿到数组
  formData.append('Fruit', JSON.stringify(fruit_temp));
  // 方案2：逐个追加带[]的键名，Java、PHP等多数后端框架可自动识别为数组
  // fruit_temp.forEach(item => {
  //   formData.append('Fruit[]', item);
  // })

  for (var pair of formData.entries()) {
    console.log(pair[0] + ', ' + pair[1]);
  }
}

原有HTML代码无需修改 #

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