如何在純 Javascript 中獲取復選框的標簽值

Question

您好，我正在詢問有關如何使用普通 Javascript 獲取與其元素對應的 Element 值的幫助。 我的 HTML：

<label id ="label1" for = "vanilla">Vanilla
                <input type ="checkbox" id = "vanilla" name = "icecream">
</label><br>
<label id = "label2" for = "chocolate"> chocolate
                <input type = "checkbox" id = "chocolate" name = "icecream">
</label><br>
<label id = "label3" for = "coffee"> Coffee
                <input type = "checkbox" id = "coffee" name = "icecream">
</label> 

我的 Javascript，目前返回“Null”或 BlankSpace：

var IceCreamBox = document.getElementsByName("icecream");
    var RootBeerBox = document.getElementsByName("rootbeers");
    var t;
    var j = [];
    for( var i = 0; i < IceCreamBox.length; i++)
    {
        if(IceCreamBox[i].checked == true)
        {
            
            j[i] = IceCreamBox[i].nodeValue;
        }

Answer 1

您可以使用filter只保留選中的， map和document.querySelector來找到它們對應的標簽：

 // Convert the HTMLCollection to an Array to be able to use forEach, filter, map var IceCreamBox = [...document.getElementsByName("icecream")]; IceCreamBox.forEach(cb => cb.addEventListener('click', listCheckedOptions)); function listCheckedOptions() { var j = IceCreamBox // Filter to keep only the checked ones .filter(cb => cb.checked) // Map them to their label text .map(cb => document.querySelector(`label[for="${cb.id}"]`).textContent.trim()); console.log(j); }

 <label for="vanilla">Vanilla <input type ="checkbox" id="vanilla" name="icecream"> </label><br> <label for="chocolate">Chocolate <input type="checkbox" id="chocolate" name="icecream"> </label><br> <label for="coffee">Coffee <input type="checkbox" id="coffee" name="icecream"> </label>