如何获取container-body类下所有textarea输入值并赋值给变量

算力阿峰

2026-9-24

原生JavaScript实现方案

直接通过DOM选择器匹配所有符合条件的文本框，遍历取值即可：

// 匹配所有.container-body下的.body-text类textarea元素
const textareaList = document.querySelectorAll('.container-body textarea.body-text');
// 用数组存储所有文本框的值，也可按需赋值给独立变量
const textareaValues = [];

textareaList.forEach((textarea, index) => {
  // 不需要去除首尾空格可以去掉.trim()
  const currentValue = textarea.value.trim();
  textareaValues.push(currentValue);
  // 需单独赋值给变量可按索引处理，示例：
  // if(index === 0) firstTextareaVal = currentValue;
  // if(index === 1) secondTextareaVal = currentValue;
})

如果需要按所属的container-body容器分组取值，避免不同容器的文本框混淆，可以用嵌套遍历实现：

const allContainerList = document.querySelectorAll('.container-body');
const groupedTextValues = [];

allContainerList.forEach(container => {
  const currentContainerTextareas = container.querySelectorAll('textarea.body-text');
  const currentValues = Array.from(currentContainerTextareas).map(item => item.value.trim());
  groupedTextValues.push(currentValues);
})

jQuery实现方案

如果项目引入了jQuery，写法更简洁：

// 直接获取所有符合条件的文本框值存入数组
const textareaValues = $('.container-body textarea.body-text').map(function() {
  return $(this).val().trim();
}).get();

// 按container-body容器分组取值
const groupedTextValues = $('.container-body').map(function() {
  return $(this).find('textarea.body-text').map(function() {
    return $(this).val().trim();
  }).get();
}).get();