如何从 JSON 数据动态生成交互式复选框，简化表单构建并提高数据收集效率？

javascript

2024-03-15 05:14:18

从 JSON 数据动态生成交互式复选框

引言

在 Web 开发中，生成动态交互式表单元素（例如复选框）对于用户交互和数据收集至关重要。通过从 JSON 数据中获取信息，我们可以根据需要自动创建复选框，从而简化表单构建过程。

解决方案

我们的解决方案涉及以下步骤：

1. 获取 JSON 数据

首先，通过 PowerShell 脚本获取 JSON 数据，然后将其转换为一个可由 JavaScript 访问的变量。

2. 创建 HTML 代码

创建包含复选框占位符的 HTML 文档。这些占位符将由 JavaScript 动态填充。

3. 动态填充复选框

使用 JavaScript 遍历 JSON 数据，并为每个数据项创建一个复选框。复选框将具有相应的名称、值和标签。

4. 提交表单

当用户提交表单时，JavaScript 将检索选中的复选框并将其值记录到控制台中。

示例代码

# 获取 JSON 数据
$jsonData = Get-Content -Path "path\to\json.json" | ConvertFrom-Json

# 创建 HTML 代码
$html = @'
<form>
    <fieldset>
        <legend>用户组</legend>
        <ul>
            <!-- 复选框占位符 -->
        </ul>
    </fieldset>
    <input type="submit" value="提交">
</form>
'@

# 创建 JavaScript 代码
$js = @"
const groups = document.querySelector("ul");

jsonData.forEach(group => {
    const li = document.createElement("li");
    const checkbox = document.createElement("input");
    checkbox.setAttribute("type", "checkbox");
    checkbox.setAttribute("value", group.Name);
    checkbox.setAttribute("id", group.Name);
    const label = document.createElement("label");
    label.setAttribute("for", group.Name);
    label.textContent = group.Name;
    li.appendChild(checkbox);
    li.appendChild(label);
    groups.appendChild(li);
});

document.querySelector("form").addEventListener("submit", event => {
    event.preventDefault();
    const selectedGroups = [];
    document.querySelectorAll("input[type=checkbox]:checked").forEach(checkbox => {
        selectedGroups.push(checkbox.value);
    });
    console.log(selectedGroups);
});
"@

# 合并 HTML 和 JavaScript
$output = $html + "<script>" + $js + "</script>"

# 输出到 HTML 文件
Set-Content -Path "output.html" -Value $output