HTML Template string : input tag type checkbox

Question

I need to create a checkbox input for each element of myObject, I decided to use Template literals for this:

function checkTemplate(myObject){
    var checkboxDiv = checkboxesArtist;
    checkboxDiv.innerHTML=`
        ${myObject.map(function(art){
            return `
            <div class='form-check'>
                <label class='form-check-label' for='${art.id}'>
                    <input class='form-check-input artist_opinion' id='${art.id}' 
                    type='checkbox' name='${art.name}' value='${art.id}'/>
                    ${art.name}
                    <small class='text-secundary'>${art.count}</small>
                </label>
            </div>   
        `
        }).join('')} 
    `
} 

How can I access the state of each checkbox? I try to create an array by

input = document.getElementsByClassName('form-check-input artist_opinion');

If I do console.log(input), I can see the HTML Collection Array with all the elements, however with the note 'Value below was evaluated just now' and if I do console.log(input.length), that is 0. So I do not know how to access elements created with the above code snippet, in particular, how to check the value of the checkbox.

Answer 1

What you can do is use document.getElementById since you're already assigning each input an id based on the artist's id. Then you can loop over each artist in myObject to create a list of ids to check the values of. Or, if you're checking for a specific checkbox, you can grab just the value of that one using the artist's id.