如何修复jQuery代码，使选中others复选框时可获取用户输入的自定义值？

问题根因 #

1. 勾选others选项时会立即读取输入框值，此时用户尚未完成输入，导致subject_type存储的是空值，后续用户输入内容时没有同步更新该变量，提交时自然拿到空值
2. 提交按钮的触发属性配置错误，你写的sendForm ="submit()"是无效自定义属性，无法触发提交函数
3. 完全依赖提前存储的subject_type变量，没有在提交时做二次校验，容易出现值滞后的问题
4. 你贴的sendForm代码末尾多了一个多余的闭合}，会引发语法报错

修改方案 #

1. 修正提交按钮触发属性

把原有按钮代码改为：

<div class="col-md-12">
  <button type="button" onclick="sendForm()">SEND</button>
</div>

2. 调整JS逻辑

增加输入框内容监听，提交时新增实时取值逻辑做双保险，修改后完整JS代码如下：

let subject_type = '';

$('input[name="web[]"]').change(function() {
  $('input[name="' + this.name + '"]').not(this).prop('checked', false);
  if (this.value != 'others') {
    subject_type = this.value;
  } else {
    // 勾选others时优先读取输入框已有内容
    subject_type = $("#subject_name").val();
  }
});

$("#subject").hide();
$("#oth_subject").change(function() {
  if ($(this).is(':checked')) {
    $("#subject").show();
  } else {
    $("#subject").hide();
  }
});

// 新增：监听自定义输入框内容变化，实时更新存储值
$("#subject_name").on('input', function() {
  if ($("#oth_subject").is(':checked')) {
    subject_type = $(this).val().trim();
  }
});

const sendForm = () =>{
  let formData  = new FormData();
  // 新增：提交时实时取值，避免存储变量更新不及时
  let finalSubject = '';
  const checkedOption = $('input[name="web[]"]:checked');
  if (checkedOption.length) {
    if (checkedOption.val() === 'others') {
      finalSubject = $("#subject_name").val().trim();
    } else {
      finalSubject = checkedOption.val();
    }
  }
  formData.append('subject', finalSubject);
           
  for (var pair of formData.entries()) {
    console.log(pair[0]+ ', ' + pair[1]);
  }
}

修改后即可正常拿到others选项对应的自定义输入值。

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