时间戳

首页 > 解决方案 > HTML模板字符串：输入标签类型复选框

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

问题描述

我需要为 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(input)，我可以看到包含所有元素的 HTML 集合数组，但是带有注释“刚刚评估下面的值”，如果我执行 console.log(input.length)，则为 0 . 所以我不知道如何访问用上面的代码片段创建的元素，特别是如何检查复选框的值。

标签： javascriptcheckboxtemplate-literals

解决方案

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

推荐阅读