Javascript 如何获取复选框的文本？

我有以下一组复选框：

<ul class="checkbox_list">
 <li><input name="mensajes[receptores_list][]" type="checkbox" value="5" id="mensajes_receptores_list_5" />&nbsp;<label for="mensajes_receptores_list_5">Carlos (Admin)</label></li>
<li><input name="mensajes[receptores_list][]" type="checkbox" value="1" id="mensajes_receptores_list_1" />&nbsp;<label for="mensajes_receptores_list_1">Jorge (Admin)</label></li>
<li><input name="mensajes[receptores_list][]" type="checkbox" value="3" id="mensajes_receptores_list_3" />&nbsp;<label for="mensajes_receptores_list_3">Marisa (Admin)</label></li>
<li><input name="mensajes[receptores_list][]" type="checkbox" value="6" id="mensajes_receptores_list_6" />&nbsp;<label for="mensajes_receptores_list_6">Christian (Apuntes)</label></li>
<li><input name="mensajes[receptores_list][]" type="checkbox" value="4" id="mensajes_receptores_list_4" />&nbsp;<label for="mensajes_receptores_list_4">Julieta (Contable)</label></li>
<li><input name="mensajes[receptores_list][]" type="checkbox" value="2" id="mensajes_receptores_list_2" />&nbsp;<label for="mensajes_receptores_list_2">Vicky (Contable)</label></li>
</ul> 

卡洛斯（行政）
豪尔赫（行政）
玛丽莎（行政）
克里斯蒂安（阿彭特斯）
朱丽叶（康塔布尔）
Vicky（可触摸）

---

使用javascript，我如何访问每个项目的文本。例如，对于id=“mensajes\u receptores\u list\u 5”的元素，我想获取文本“Carlos（Admin）”

这将迭代并将所有文本打印到控制台。例如，您还可以使用

if（i==3）

获得一个特定的值

var labels = document.getElementsByTagName('label');

for(var i = 0; i < labels.length; i++)
{
    console.log(labels[i].innerHTML);
}

var labels=document.getElementsByTagName（'label'）；
对于（变量i=0；i

---

您可以使用同级选择器：

var id = "mensajes_receptores_list_5"
alert( document.querySelector("#"+id+"+ label").innerText );

你可以用。 例如：

通过Jquery

 function getLabel(id)
   {
  return $("#"+id).next("label").html();
   }

  //id of checkbox ,you want to get label of
  var label=getLabel('mensajes_receptores_list_1'); 
  alert(label);

---

jshiddle

我会这样处理：

function getLabelText(needle) {
    var labels = document.getElementsByTagName("label");
    var texts = [];
    for (var i = 0; i < labels.length; i++) {
        var label = labels[i];
        if(label.getAttribute("for") == needle) {
            console.log(label.innerText);
            texts.push(label.innerText);
        }
    }
    return texts;
}

函数getLabelText（指针）{
var labels=document.getElementsByTagName（“标签”）；
var文本=[]；
对于（变量i=0；i

这是一个现代的vanilla JS解决方案，适用于查找与复选框关联的标签的一般情况：

function getCheckboxLabel(checkbox) {
    if (checkbox.parentNode.tagName === 'LABEL') {
        return checkbox.parentNode
    }
    if (checkbox.id) {
        return document.querySelector('label[for="' + checkbox.id + '"]')
    }
}

因为根据，有两种方法可以创建

和

之间的关联：

首先，可以将label元素环绕在输入元素周围：

<label>Input here:
    <input type="text" name="theinput" id="theinput">
</label>

因此，要回答如何获取文本的原始问题，只需将此函数与以下函数一起使用：

函数getCheckboxLabel（复选框）{
如果（checkbox.parentNode.tagName=='LABEL'）{
返回checkbox.parentNode
}
if（checkbox.id）{
return document.querySelector（'label[for=“”+checkbox.id+”]”标签）
}
}
让复选框=document.querySelectorAll（'input[type=checkbox]”）
复选框。forEach（（复选框）=>{
let label=getCheckboxLabel（复选框）
如果（标签）{
console.log（'label text:'，label.textContent）
}否则{
console.log（'找不到的标签'，复选框）
}
})

卡洛斯（行政）
豪尔赫（行政）
玛丽莎（行政）
克里斯蒂安（阿彭特斯）
朱丽叶（康塔布尔）
Vicky（可触摸）

大多数现代浏览器允许您通过

标签

属性访问与输入元素关联的标签

const inputs = document.getElementsByTagName("input");
console.log(`First label for first element is: $inputs[0].labels[0].innerText`)

从：

Labelable元素和所有输入元素都有一个与之关联的活动节点列表对象，该对象以树的顺序表示标签元素的列表，其标签控件就是所讨论的元素。非表单关联自定义元素的labelable元素的labels IDL属性和输入元素的labels IDL属性在获取时必须返回该NodeList对象，并且必须始终返回相同的值，除非该元素是类型属性处于隐藏状态的输入元素，在这种情况下，它必须返回null

---

浏览器兼容性可在此找到

您是否在查找标签或复选框的文本？我想获取文本“Carlos（Admin）”，例如，如果您正在使用jQuery解决方案，最好使用jQuerykjelderg标记：好的，好的，我不知道解决我的问题的最佳解决方案是什么，我不道歉。我只是想帮你把东西正确地贴上标签。这只适用于标签在复选框后面的例子，但不适用于更一般的标签和复选框。我有一个支架紧靠在后面。但是，此解决方案找不到解决方案。由于提供了非jQuery解决方案，结果总是返回null值。我只是想在我的例子中添加它。值返回“undefined”，所以我使用了.innerText，这很有效。

<label for="theinput">Input here:</label>
<input type="text" name="whatever" id="theinput">

const inputs = document.getElementsByTagName("input");
console.log(`First label for first element is: $inputs[0].labels[0].innerText`)