如何将输入的项目名、地址显示在指定textarea文本域中

• 在指定文本域中同步展示三类内容：输入的项目名称、输入的项目地址、选中的复选框对应文本
• 当前已完成项目名称、复选框选中文本的同步展示，仅缺少项目地址的展示逻辑

1. 未绑定项目地址输入框#search_input的事件监听，地址输入后不会触发文本域更新
2. 内容拼接逻辑分散在两个事件回调中，依赖全局变量existValue存储复选框内容，容易出现内容不同步、取消勾选时替换文本失败的问题
3. 未处理空值场景，输入框为空时容易出现多余空行

替换原有JS逻辑为以下代码即可，原有HTML结构除了<tr>标签未放在表格结构内的规范问题外，不需要做额外功能相关修改：

// 统一处理文本域内容更新
function refreshTextarea() {
    // 取项目名称
    const nameVal = $('#pname').val().trim();
    // 取项目地址
    const addressVal = $('#search_input').val().trim();
    // 收集所有选中的复选框名称
    const checkedOptions = [];
    $('input[type="checkbox"][rel="textbox1"]:checked').each(function () {
        checkedOptions.push(this.name);
    });
    // 过滤空值后按行拼接
    const finalContent = [nameVal, addressVal, ...checkedOptions]
        .filter(item => item.length > 0)
        .join('\n');
    // 写入文本域
    $('#textbox1').val(finalContent);
}

// 绑定所有触发更新的事件
$('#pname').on('input', refreshTextarea);
$('#search_input').on('input', refreshTextarea);
$('input[type="checkbox"][rel="textbox1"]').on('click', refreshTextarea);

• 把内容更新逻辑抽为独立公共函数，所有相关输入项变化时都调用同一个函数，避免逻辑分散导致的不同步问题
• 每次更新时重新全量收集所有选中的复选框值，替代原有手动增删文本的逻辑，不会出现取消勾选时文本替换遗漏、匹配错误的问题
• 拼接前自动过滤空内容，避免输入框为空时文本域出现多余空行
• 后续如果需要新增展示字段，只需要在拼接数组中加入对应字段的取值逻辑即可，扩展方便

内容的提问来源于stack exchange，提问作者Lepeng Z.