如何使用 JavaScript 在配置文件中用数据填充复选框？

Question

我希望能够使用来自配置文件的数据填充复选框列表。

事实上，如果我的复选框是用来选择一项运动的，在我的配置文件中，我在 JSON 中有这样的内容：

sports: ["Tennis", "Rugby", "Soccer"]

我希望我的复选框是自适应的，这意味着输入的数量映射到 JSON 文件中 table 的长度。

非常感谢您的帮助！

编辑：

这是我的 HTML 代码

<div class="form-check">
    <label for="editSports">Pick your sport(s)</label>
    <input type="checkbox" class="form-control" id="editSports" name ="editSports">
    </input>
</div>

我想知道如何用 Javascript 填充它，我想我必须做这样的事情：

ddn = $("#editSharedFolders");
config.sports.forEach(sport=> {
        ddn.append($('<checkbox>', {value: sport, text: sport})); //This line is the problem I guess
});

Answer 1

这是一个干净的 vanilla js 方法。

它遍历您的常量并检查任何元素的 id 是否存在。如果是这样，它将每个元素添加到 select。这应该让你朝着正确的方向前进。如果您还有其他问题，请随时向他们提问。

我个人的意见是jQuery如果不需要的话尽量避免。所以我总是更喜欢 vanilla javascipt 解决方案而不是 jQuery.

编辑：为了获取数组中每个元素的复选框，我使用了这个实现：Creating the checkbox dynamically using JavaScript?

let constants = {sports: ["Tennis", "Rugby", "Soccer", "Basketball"]}
for (type in constants){
    
    constants[type].forEach(function(element){
    var checkbox = document.createElement('input');
    checkbox.type = "checkbox";
    checkbox.name = element;
    checkbox.value = element;
    checkbox.id = element;
    
    var label = document.createElement('label')
    label.htmlFor = element;
    label.appendChild(document.createTextNode(element));
    document.getElementById("container").appendChild(checkbox);
    document.getElementById("container").appendChild(label);
    })
   }

<div id="container"></div>

Answer 2

在您的脚本中尝试以下操作：

<script>
$(document).ready(function() {
    var sports = ["Tennis", "Rugby", "Soccer"]
    for (i = 0; i < sports.length; i++) { 
            $("#checkbox_container").append ( "<label for='check_"+ i +"'>" + sports[i] + "</label><input id='check_" + i + "' type='checkbox' value='"+sports[i]+"'/><br/>" );
    }
});

</script>

然后在您的 html 中执行此操作：

<body>
<div id="checkbox_container">
</div>
</body>

如何使用 JavaScript 在配置文件中用数据填充复选框？

How to fill checkbox with data in a config file using JavaScript?

html

javascript

checkbox

config