基于复选框选中状态动态生成列表并填充多行文本框

云原生阿岚

2026-8-12

实现复选框勾选动态填充多行文本框方案

核心实现代码

HTML 结构

先搭建基础的复选组和多行文本框：

<div class="checkbox-group">
  <label><input type="checkbox" value="选项A"> 选项A</label>
  <label><input type="checkbox" value="选项B"> 选项B</label>
  <label><input type="checkbox" value="选项C"> 选项C</label>
  <label><input type="checkbox" value="选项D"> 选项D</label>
</div>

<textarea id="resultTextarea" rows="5" placeholder="已选内容将显示在这里"></textarea>

JavaScript 逻辑

监听复选框的状态变化，实时更新文本框内容：

// 获取所有复选框和目标文本框
const checkboxes = document.querySelectorAll('.checkbox-group input[type="checkbox"]');
const textarea = document.getElementById('resultTextarea');

// 定义更新文本框的函数
function updateTextarea() {
  // 收集所有被勾选的复选框的值
  const selectedValues = Array.from(checkboxes)
    .filter(checkbox => checkbox.checked)
    .map(checkbox => checkbox.value);
  
  // 将值按换行分隔，填充到文本框
  textarea.value = selectedValues.join('\n');
}

// 给每个复选框绑定变化事件
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', updateTextarea);
});

可选样式优化（贴近参考界面）

添加简单CSS让布局更美观：

.checkbox-group {
  margin-bottom: 15px;
}
.checkbox-group label {
  display: block;
  margin: 8px 0;
  cursor: pointer;
}
#resultTextarea {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}