如何在勾选复选框添加内容时保留文本框原有内容

问题背景 #

制作HTML表单用于生成医疗保险文档，包含3个表单、32组关联下拉选单的复选框，核心需求是：

• 勾选复选框时，将下拉选单的预设文本追加到文本框原有内容后
• 取消勾选时，移除该复选框对应的预设文本，恢复到勾选前的状态

原有函数会清空文本框内容，修改后的代码存在取消勾选无法恢复、多复选框操作时内容异常追加的问题。

原有核心函数：

function FillDetails29(f) {
  if(f.checkbox29.checked == true) {
    f.TEXT.value = ('' + f.trans.value + '')
} else {
    f.TEXT.value = "";
      }
}

修改后异常代码：

function FillDetails29(f) {
  const elem = f.TEXT;
  if (!elem.dataset.prevValue) elem.dataset.prevValue = elem.value;
  const updatedValue = f.checkbox29.checked ? f.trans.value : (elem.dataset.prevValue || '') + (f.trans.value);
  elem.value = updatedValue;
}

解决方案 #

针对多复选框场景，通过存储文本框的基础内容和已追加内容集合，实现精准的追加/移除逻辑，无需为每个复选框单独写函数：

1. 通用JavaScript函数 #

function updateTextArea(form) {
  const textArea = form.TEXT;
  // 初始化基础内容：首次加载或用户手动修改文本时更新
  if (!textArea.dataset.baseContent) {
    textArea.dataset.baseContent = textArea.value;
  }

  // 监听用户手动修改文本，更新基础内容并重置追加集合
  textArea.addEventListener('input', () => {
    textArea.dataset.baseContent = textArea.value;
    textArea.dataset.addedContents = JSON.stringify([]);
  });

  // 获取当前操作的复选框、对应下拉文本和唯一标识
  const checkbox = event.target;
  const appendText = form.querySelector(`[data-for="${checkbox.dataset.key}"]`).value;
  const key = checkbox.dataset.key;

  // 读取已追加内容集合
  let addedContents = JSON.parse(textArea.dataset.addedContents || '[]');

  if (checkbox.checked) {
    // 勾选时：避免重复添加，将文本加入集合
    if (!addedContents.some(item => item.key === key)) {
      addedContents.push({ key, text: appendText });
    }
  } else {
    // 取消时：移除对应标识的追加文本
    addedContents = addedContents.filter(item => item.key !== key);
  }

  // 重新拼接文本内容
  textArea.value = textArea.dataset.baseContent + addedContents.map(item => item.text).join('');
  
  // 更新存储的追加集合
  textArea.dataset.addedContents = JSON.stringify(addedContents);
}

2. HTML结构示例 #

给每个复选框和对应下拉选单添加匹配的标识属性，确保关联正确：

<form>
  <textarea name="TEXT">Andrea looked good in that sweater.</textarea>

  <!-- 第一组复选框+下拉 -->
  <input type="checkbox" data-key="cb29" onclick="updateTextArea(this.form)">
  <select data-for="cb29">
    <option value=" I wonder if there are any more at the store?">查询库存</option>
    <option value=" Maybe it's on sale now.">询问折扣</option>
  </select>

  <!-- 第二组复选框+下拉 -->
  <input type="checkbox" data-key="cb30" onclick="updateTextArea(this.form)">
  <select data-for="cb30">
    <option value=" Please provide more details about the product.">索要详情</option>
  </select>
</form>

关键说明 #

• 基础内容存储：文本框的dataset.baseContent记录用户初始输入或手动修改后的内容，作为拼接的基础
• 追加集合管理：用dataset.addedContents存储所有已勾选的追加文本（带唯一标识），避免重复添加，取消时精准移除
• 多复选框兼容：通过data-key和data-for属性关联复选框与下拉选单，一组标识对应一组操作，支持任意数量的复选框

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