JavaScript循环生成文本行时如何添加独立复选框？

$('#checkBoxConsent')返回的是jQuery对象，直接和字符串拼接时，JavaScript会把对象转换成默认的字符串表示[object Object]，这就是你看到异常输出的原因。

这里提供两种更合理的实现方式，根据你的需求选择：

方案1：直接生成复选框HTML（推荐，更轻量） #

不需要依赖页面上已有的复选框元素，直接动态生成HTML结构，效率更高：

// 用数组存储每一行的HTML片段，比字符串+=更高效
const consentFragments = [];
const consentLines = data.consentText.consentLines;

// 遍历所有 consent 行，注意加 hasOwnProperty 避免遍历原型链属性
for (const key in consentLines) {
  if (consentLines.hasOwnProperty(key)) {
    const lineContent = consentLines[key];
    // 生成包含复选框和文本的行结构，用div包裹方便样式控制
    consentFragments.push(`<div class="consent-item"><input type="checkbox" class="consent-checkbox"> ${lineContent}</div>`);
  }
}

// 把所有片段拼接后插入目标容器
$('#stateConsentLines').html(consentFragments.join(''));

方案2：克隆已有复选框元素（适合复用已有样式/逻辑） #

如果页面上的#checkBoxConsent有特定样式或绑定的事件，需要复用它的结构，可以克隆元素后添加到页面：

const $container = $('#stateConsentLines').empty(); // 先清空容器
const consentLines = data.consentText.consentLines;
const $originalCheckbox = $('#checkBoxConsent');

for (const key in consentLines) {
  if (consentLines.hasOwnProperty(key)) {
    // 克隆复选框，移除原id避免页面上出现重复id
    const $checkboxClone = $originalCheckbox.clone().removeAttr('id');
    const lineContent = consentLines[key];
    // 创建行容器，把复选框和文本拼接进去
    const $lineItem = $('<div class="consent-item">').append($checkboxClone).append(` ${lineContent}`);
    // 添加到目标容器
    $container.append($lineItem);
  }
}

• 用数组存储HTML片段再拼接，比反复用+=修改字符串性能更好（字符串是不可变类型，每次+=都会创建新字符串）
• 遍历对象时加上hasOwnProperty检查，避免遍历到原型链上的无关属性
• 用class代替id来控制样式，避免页面出现重复id的问题

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