HTML 模板字符串：输入标签类型复选框

Question

我需要为 myObject 的每个元素创建一个复选框输入，我决定为此使用模板文字：

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('')} 
    `
}

如何访问每个复选框的状态？我尝试通过

创建一个数组

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

如果我执行 console.log（输入），我可以看到包含所有元素的 HTML 集合数组，但是带有注释 'Value below was evaluated just now' 如果我执行 console.log(input.length)，即0。所以我不知道如何访问用上面的代码片段创建的元素，特别是如何检查复选框的值。

Answer 1

您可以使用 document.getElementById，因为您已经根据艺术家的 ID 为每个输入分配了一个 ID。然后你可以遍历 myObject 中的每个 artist 以创建一个 ids 列表来检查其值。或者，如果您正在检查特定的复选框，则可以使用艺术家的 ID 仅获取该复选框的值。

HTML 模板字符串：输入标签类型复选框

HTML Template string : input tag type checkbox

javascript

checkbox

template-literals