4

我有以下一组复选框：

<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>

使用 javascript，我如何访问每个项目的文本。例如，对于 id = "mensajes_receptores_list_5" 的元素，我想获取文本“Carlos (Admin)”

4

7 回答 7

6

我会这样处理它：

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;
}
于 2013-10-17T18:37:38.893 回答
3

通过 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);

jsfiddle http://jsfiddle.net/pcQgE/1/

于 2013-10-17T18:34:40.130 回答
2

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

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

因为根据this SO answer，有两种方法可以创建<input>and之间的关联<label>：

首先，您可以将 label 元素包裹在 input 元素周围：

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

另一种方法是使用for属性，给它相关输入的 ID：

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

因此，要回答如何获取文本的原始问题，您只需使用此函数以及textContent：

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

let checkboxes = document.querySelectorAll('input[type=checkbox]')
checkboxes.forEach((checkbox) => {
    let label = getCheckboxLabel(checkbox)
    if (label) {
        console.log('label text:', label.textContent)
    } else {
        console.log('could not find the label of', checkbox)
    }
})
<!-- Sample HTML taken from OP -->
<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>

于 2018-09-20T18:11:14.927 回答
1

您可以使用兄弟选择器：

var id = "mensajes_receptores_list_5"
alert( document.querySelector("#"+id+"+ label").innerText );
于 2013-10-17T18:26:18.617 回答
0

这将遍历并将所有文本打印到控制台。if(i == 3)您也可以通过使用例如来获得特定的。

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

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

http://jsfiddle.net/pcQgE/

于 2013-10-17T18:24:59.843 回答
0

您可以使用jQuery。例子：

var label = $("#mensajes_receptores_list_5").next("label").text();
alert(label)
于 2013-10-17T18:27:27.220 回答
0

大多数现代浏览器允许您通过labels属性访问与输入元素关联的标签。

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

从HTML 规范：

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

浏览器兼容性可在此caniuse.com 链接中找到

于 2019-05-24T19:01:56.470 回答