复选框更新功能推送数组时db_fruit_id固定重复如何解决

问题根源 #

你代码里的错误主要来自3个地方：

• 复选框change事件监听写在了fruit_data的遍历循环内，会重复绑定N次，执行逻辑混乱
• 取db_fruit_id的选择器完全错误，没有和当前遍历的复选框关联，所以永远只能拿到第一个匹配的id值
• 字段名前后不统一，API返回的是fruit_id，代码里混用fruit_type_id、db_id、db_fruit_id，数据对应错乱

修复方案 #

直接替换你Promise.all的then逻辑即可：

Promise.all([getFruit(), getFruitDetails(id)])
  .then(function(results) {
    const fruitListRes = results[0];
    const fruitDetailRes = results[1];
    let fruit_temp = [];

    // 第一步：渲染所有可选水果复选框
    if (fruitListRes.data.status == 'success') {
      fruitListRes.data.result.forEach((item) => {
        $('#fruit_type').append(`<div class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" id="fruit_type_id_${item.fruit.id}" name="chk_fruit" value="${item.fruit.id}">
          <label class="custom-control-label" for="fruit_type_id_${item.fruit.id}">${item.fruit.name}</label>
          <input type="hidden" id="fruit_dbId_${item.fruit.id}" value="" />
        </div>`);
      });
    }

    // 第二步：回填已选中的水果数据
    if (fruitDetailRes.data.status == 'success') {
      fruitDetailRes.data.fruit.fruit_data.forEach((item) => {
        // 勾选对应复选框
        $(`#fruit_type_id_${item.fruit_id}`).prop('checked', true);
        // 给hidden input赋值db_fruit_id
        $(`#fruit_dbId_${item.fruit_id}`).val(item.db_fruit_id);
        // 初始化默认选中的数组
        fruit_temp.push({
          "db_fruit_id": item.db_fruit_id,
          "fruit_id": item.fruit_id
        });
      });
    }

    // 第三步：绑定复选框change事件（放到循环外面，只绑定一次）
    $(document).on('change', 'input[name="chk_fruit"]', function() {
      fruit_temp = [];
      $('input[name="chk_fruit"]:checked').each(function() {
        const currentFruitId = $(this).val();
        // 取当前复选框对应的hidden input里的db_fruit_id，新增未存的为空，后端自动生成即可
        const currentDbFruitId = $(`#fruit_dbId_${currentFruitId}`).val() || '';
        fruit_temp.push({
          "db_fruit_id": currentDbFruitId,
          "fruit_id": currentFruitId
        });
      });
    });
});

额外说明 #

你提供的Fruitlist API返回示例存在语法错误，每个result对象内不能重复定义fruit键，实际接口如果返回的是单元素对应单水果的结构，调整遍历逻辑即可，不影响上述修复方案的核心逻辑。

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