Как заполнить флажок данными в конфигурационном файле, используя JavaScript? - PullRequest
Новая
       2

Как заполнить флажок данными в конфигурационном файле, используя JavaScript?

0 голосов
/ 30 марта 2020

Я хотел бы иметь возможность заполнить список флажков данными из файла конфигурации .

На самом деле, если мой флажок сделан, чтобы выбрать Спорт, в моей конфигурации Файл у меня есть что-то вроде этого в JSON:

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

Я хотел бы, чтобы мой флажок был адаптивным, означает, что количество входов отображается на длину таблицы в JSON файл.

Большое спасибо за вашу помощь!

Редактировать:

Вот мой 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
});

Ответы [ 2 ]

0 голосов
/ 30 марта 2020

Попробуйте это ниже в вашем скрипте: 

<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>
0 голосов
/ 30 марта 2020

Вот чистый ванильный js подход.

Он перебирает ваши константы и проверяет, существует ли идентификатор для какого-либо элемента. Если это так, он добавляет каждый элемент к выбору. Это должно привести вас в правильном направлении. Если у вас есть дополнительные вопросы, не стесняйтесь их задавать.

Мое личное мнение - избегать jQuery как можно больше, если это не нужно. Поэтому я всегда предпочел бы решение vanilla javascipt вместо jQuery.

Редактировать: чтобы получить флажки для каждого элемента в массиве, я использовал эту реализацию: Создание флажка динамически с использованием 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...