如何在创建模板实例时修改自定义复选框的文本内容？

问题描述 #

当前代码可正常运行，但需求尚未完全实现：需要在表单中使用10个自定义复选框，已创建包含复选框代码的template模板，希望每次创建新复选框时，其.checkbox_txt类对应的文本内容不同（如从Computer Science改为Algebra等），如何避免重复编写代码实现该需求？

方案1：原生JavaScript结合HTML Template标签 #

利用HTML5的<template>标签定义复用结构，再通过JavaScript循环遍历文本数组，动态克隆模板并替换文本内容，完全原生无需依赖第三方库。

<!-- 定义复选框模板 -->
<template id="checkbox-template">
  <div class="custom-checkbox">
    <input type="checkbox" class="checkbox-input" />
    <label class="checkbox-label">
      <span class="checkbox-txt"></span>
    </label>
  </div>
</template>

<!-- 放置复选框的表单容器 -->
<form id="checkbox-container"></form>

<script>
// 准备所有需要的复选框文本列表
const checkboxLabels = [
  'Computer Science',
  'Algebra',
  'Physics',
  'Chemistry',
  'Biology',
  'History',
  'Geography',
  'Literature',
  'Art',
  'Music'
];

// 获取模板和容器元素
const template = document.getElementById('checkbox-template');
const container = document.getElementById('checkbox-container');

// 循环生成复选框
checkboxLabels.forEach(labelText => {
  // 克隆模板的内容节点
  const checkboxNode = template.content.cloneNode(true);
  // 找到文本元素并设置内容
  checkboxNode.querySelector('.checkbox-txt').textContent = labelText;
  // 将生成的复选框添加到容器中
  container.appendChild(checkboxNode);
});
</script>

方案2：使用前端模板引擎（以Handlebars为例） #

如果项目中已经引入模板引擎，用模板语法的循环功能可以更简洁地实现批量渲染，代码可读性更高。

<!-- 本地引入Handlebars库（需自行下载到项目中） -->
<script src="handlebars.min.js"></script>

<!-- 定义Handlebars模板 -->
<script id="checkbox-template" type="text/x-handlebars-template">
  {{#each labels}}
    <div class="custom-checkbox">
      <input type="checkbox" class="checkbox-input" id="cb-{{@index}}" />
      <label class="checkbox-label" for="cb-{{@index}}">
        <span class="checkbox-txt">{{this}}</span>
      </label>
    </div>
  {{/each}}
</script>

<form id="checkbox-container"></form>

<script>
const checkboxLabels = [
  'Computer Science',
  'Algebra',
  'Physics',
  'Chemistry',
  'Biology',
  'History',
  'Geography',
  'Literature',
  'Art',
  'Music'
];

// 编译模板
const compiledTemplate = Handlebars.compile(document.getElementById('checkbox-template').innerHTML);
// 渲染模板并插入到容器
document.getElementById('checkbox-container').innerHTML = compiledTemplate({ labels: checkboxLabels });
</script>

方案3：后端语言循环输出（适合服务端渲染场景） #

如果是服务端渲染的项目，直接用后端语言的循环语法生成HTML代码，无需前端额外处理。以PHP为例：

<?php
// 后端定义复选框文本数组
$checkboxLabels = [
  'Computer Science',
  'Algebra',
  'Physics',
  'Chemistry',
  'Biology',
  'History',
  'Geography',
  'Literature',
  'Art',
  'Music'
];
?>

<!-- 前端表单 -->
<form>
  <?php foreach ($checkboxLabels as $index => $label): ?>
    <div class="custom-checkbox">
      <input type="checkbox" class="checkbox-input" id="checkbox-<?= $index ?>" />
      <label class="checkbox-label" for="checkbox-<?= $index ?>">
        <span class="checkbox-txt"><?= $label ?></span>
      </label>
    </div>
  <?php endforeach; ?>
</form>

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