如何使用jQuery将多选框选中值及自定义输入值存入数组

问题根因 #

• 仅在复选框change事件触发时更新fruit_temp数组，勾选others后在输入框填写自定义内容的操作不会触发复选框的变更事件，导致数组里存入的是输入框未填写时的空值
• FormData.append()方法直接传入数组时，会自动将数组转为逗号拼接的字符串，如果你需要传数组格式需要做额外处理
• 拼写错误：输入框的class写的是from-control，应为form-control（不影响功能但属于代码问题）

修正后代码 #

JS部分

let fruit_temp = [];
$(document).ready(function() {
  $("#fruit").hide();
  // 监听others复选框变更
  $("#fruit_option").change(function() {
    if ($(this).is(':checked')) {
      $("#fruit").show();
    } else {
      $("#fruit").hide();
      // 取消勾选others时清空输入框和对应存储值
      $('#fruit_name').val('');
      updateFruitTemp();
    }
  });

  // 监听自定义输入框的输入事件，实时更新数组
  $('#fruit_name').on('input', updateFruitTemp);
  // 监听所有复选框变更事件
  $('input[name="chk_fruit"]').change(updateFruitTemp);

  // 封装更新数组的公共方法
  function updateFruitTemp() {
    fruit_temp = [];
    $('input[name="chk_fruit"]:checked').each(function() {
      if (this.value != 'others') {
        fruit_temp.push($(this).val());
      } else {
        const customFruit = $('#fruit_name').val().trim();
        // 只有输入框有内容时才存入，避免存空值
        if(customFruit) {
          fruit_temp.push(customFruit);
        }
      }
    });
  }
});

const submit = () => {
  let formData = new FormData();
  // 如果后端需要接收数组格式，可循环append或者转JSON字符串
  // 方式1：转JSON字符串传递
  formData.append('Fruit', JSON.stringify(fruit_temp));
  // 方式2：按数组格式循环append（适配后端接收数组的场景）
  // fruit_temp.forEach(item => formData.append('Fruit[]', item));

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

HTML部分（仅修正class拼写错误）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-6 mb-30">
  <label><b>Favourite Fruit</b></label><br>
  <div class="form-group">
    <ul>
      <li><input type="checkbox" name="chk_fruit" value="Apple"> Apple</li>
      <li><input type="checkbox" name="chk_fruit" value="Manggo"> Manggo</li>
      <li><input type="checkbox" name="chk_fruit" value="Honeydew"> Honeydew</li>
      <li><input type="checkbox" name="chk_fruit" value="Orange"> Orange</li>
      <li><input type="checkbox" name="chk_fruit" id="fruit_option" value="others"> Others</li>
    </ul>

    <div class="col-lg-12 mb-30" id="fruit" class="row">
      <label><b>insert fruit name you wish </b></label><br>
      <div class="input-group-prepend">
        <input class="form-control" type="text" id="fruit_name">
      </div>
    </div>
    <!-- more form field -->
    <br><br>
    <button onclick="submit()">Submit</button>
  </div>
</div>

改动说明 #

• 封装了公共的updateFruitTemp方法统一处理数组更新逻辑，避免重复代码
• 新增了自定义输入框的input事件监听，每次输入内容后都会同步更新数组中的自定义值
• 增加了输入框非空判断，避免勾选others但未输入内容时存入空值
• 优化了FormData传值逻辑，根据后端接收习惯可选择传JSON字符串或者数组格式
• 取消勾选others时自动清空输入框内容并同步更新数组

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