JavaScript 中使用复选框数组动态生成带名称与价格的列表项（li）-html教程-PHP中文网

本文介绍如何为每个复选框关联两个值（如服务名称和对应月费），并通过 JavaScript 动态创建结构化列表，其中包含分别显示名称与价格的元素。

本文介绍如何为每个复选框关联两个值（如服务名称和对应月费），并通过 javascript 动态创建结构化 `

` 列表，其中包含分别显示名称与价格的 `

` 元素。

在构建表单类功能（如订阅套餐配置页）时，常需将多个复选框映射为具有语义化双属性（如 name + price）的数据项。直接使用 checkbox.value 仅能存储单一字符串，难以自然承载结构化信息。本文提供一种清晰、可维护、符合现代前端实践的解决方案：以索引为桥梁，将复选框与预定义的对象数组关联。

✅ 核心思路：用索引代替原始值，实现数据解耦

不再让 value 属性直接存储显示文本（如 "Custom profile"），而是将其设为对应数据对象在数组中的数字索引（如 0）。同时，维护一个独立的 addons 数组，每个元素是一个包含 name 和 value（即价格）字段的 Plain Object：

const addons = [
  { name: "Custom profile", value: "+$1/mo" },
  { name: "Online backup",   value: "+$2/mo" },
  { name: "Extra storage",   value: "+$2/mo" }
];

对应 HTML 复选框需同步更新 value 为索引，并确保顺序一致：

<input type="checkbox" name="add-ons" value="0" onclick="getAddons()"><label>Custom profile</label>

<input type="checkbox" name="add-ons" value="1" onclick="getAddons()"><label>Online backup</label>

<input type="checkbox" name="add-ons" value="2" onclick="getAddons()"><label>Extra storage</label>

✅ JavaScript 实现：精准映射与渲染

getAddons() 函数现在从 addons 数组中按索引提取完整对象，而非仅字符串：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

function getAddons() {
  const checkboxes = document.getElementsByName("add-ons");
  addonsResult = [];

  for (let i = 0; i = 0 && index <p>setResultsPage() 负责渲染：遍历 addonsResult（此时已是对象数组），为每个对象创建 </p>

及其内部两个

元素：

function setResultsPage() {
  addonsResultList.innerHTML = ""; // 清空旧内容，避免重复追加

  addonsResult.forEach(addon => {
    const li = document.createElement("li");
    const pName = document.createElement("p");
    const pAmount = document.createElement("p");

    pName.textContent = addon.name;
    pAmount.textContent = addon.value;

    li.classList.add("flex", "justify-between");
    pName.classList.add("text-cool-gray", "text-sm");
    pAmount.classList.add("text-sm", "text-marine-blue");

    li.appendChild(pName);
    li.appendChild(pAmount);
    addonsResultList.appendChild(li);
  });
}

? 关键优化点：

使用 textContent 替代 createTextNode() + appendChild()，更简洁安全；

添加索引合法性校验（isNaN, 范围检查），增强健壮性；

innerHTML = "" 清空容器，避免多次调用导致重复渲染。

⚠️ 注意事项与延伸建议

不要硬编码 value="0" 等字符串：若未来调整 addons 数组顺序，务必同步更新所有 value 属性，否则映射错乱；
替代方案对比：
- ✅ JSON 编码（value='{"name":"X","value":"+1"}'）：灵活但需 JSON.parse()，存在解析失败风险；
- ✅ 分隔符拼接（value="X|+$1/mo"）：简单但缺乏类型提示，扩展性差；
- ✅ 数据驱动渲染（推荐）：将复选框也由 addons 数组动态生成，彻底消除手动维护索引的风险；
无障碍友好：确保每个都有配套（使用 for 或包裹方式），提升可访问性。