[英]How to Grab the Value of a label for a checkbox in pure Javascript
您好,我正在询问有关如何使用普通 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;
}
您可以使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.