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

Question

I would like to be able to fill a list of checkbox with datas from a config file.

In fact, if my checkbox is made to choose a Sport, in my config file I have something like this in JSON :

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

I would like my checkbox to be adaptative, means that the number of inputs is mapped on the length of the table in the JSON file.

Thank you very much for your help !

Edit :

Here is my HTML code

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

And I am wondering how to fill it with Javascript, I guess I'll have to do something like this :

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

Just edited, I try what's above but when I launch I haven't any input — MaxG
– MaxG, Commented Mar 30, 2020 at 7:51

Aaron · Accepted Answer · 2020-03-30 07:58:34Z

0

Here is a clean vanilla js approach.

It iterates over your constants and checks if the id exists for any element. If so it adds each element to the select. This should get you in the right direction. If you have further questions feel free to ask them.

My personal opinion is to avoid jQuery as much as possible if its not needed. So I'd always prefer a vanilla javascipt solution over jQuery.

Edit: To get checkboxes for each element in the array, I used this implementation: 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>

edited Mar 30, 2020 at 7:58

answered Mar 30, 2020 at 7:51

Aaron

1,7471 gold badge10 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MaxG Over a year ago

Thank you this help, however would this work with a checkbox input, as I have to be able to pick multiple sports ?

MaxG Over a year ago

That's perfect ! Thank you very much

Aaron Over a year ago

Please mark my answer as the accepted one @MaxG so people can find a working solution. Thanks :)

Abhishek Kulkarni · Accepted Answer · 2020-03-30 08:02:47Z

0

Try this below in your script :

<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>

And in your html do this :

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

answered Mar 30, 2020 at 8:02

Abhishek Kulkarni

1,7671 gold badge8 silver badges9 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related