如何获取复选框的文本?
Posted
技术标签:
【中文标题】如何获取复选框的文本?【英文标题】:How I can get the text of a checkbox? 【发布时间】:2013-10-26 09:17:17 【问题描述】:我有以下一组复选框:
<ul class="checkbox_list">
<li><input name="mensajes[receptores_list][]" type="checkbox" value="5" id="mensajes_receptores_list_5" /> <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" /> <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" /> <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" /> <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" /> <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" /> <label for="mensajes_receptores_list_2">Vicky (Contable)</label></li>
</ul>
使用 javascript,我如何访问每个项目的文本。例如,对于 id = "mensajes_receptores_list_5" 的元素,我想获取文本“Carlos (Admin)”
【问题讨论】:
您在寻找标签或复选框的文本吗? 我想获取文本“Carlos (Admin)”,例如 如果您喜欢 jQuery 解决方案,最好使用 jQuery 进行标记 kjelderg:好的,好的,我不知道我的问题的最佳解决方案是什么,我很抱歉 不道歉。我只是想帮助正确标记事物 【参考方案1】:我会这样处理它:
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;
【讨论】:
感谢您提供非 jQuery 解决方案。我只是想补充一点,在我的情况下 .value 返回“未定义”,所以我使用了 .innerText 并且效果很好。【参考方案2】:通过 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/
【讨论】:
请注意,这适用于标签位于复选框之后的示例,但不适用于更一般的标签和复选框。 我有一个这是一个现代 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>
和<label>
之间的关联:
首先,您可以将标签元素包裹在输入元素周围:
<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" /> <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" /> <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" /> <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" /> <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" /> <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" /> <label for="mensajes_receptores_list_2">Vicky (Contable)</label></li>
</ul>
【讨论】:
【参考方案4】:你可以使用兄弟选择器:
var id = "mensajes_receptores_list_5"
alert( document.querySelector("#"+id+"+ label").innerText );
【讨论】:
【参考方案5】:这将遍历并将所有文本打印到控制台。例如,您也可以使用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/
【讨论】:
【参考方案6】:您可以使用jQuery。 示例:
var label = $("#mensajes_receptores_list_5").next("label").text();
alert(label)
【讨论】:
【参考方案7】:大多数现代浏览器允许您通过labels
属性访问与输入元素关联的标签。
const inputs = document.getElementsByTagName("input");
console.log(`First label for first element is: $inputs[0].labels[0].innerText`)
来自HTML Spec:
标签元素和所有输入元素都有一个与之关联的活动 NodeList 对象,该对象表示标签元素列表,按树形顺序排列,其标签控件就是相关元素。不是与表单关联的自定义元素的可标记元素的标签 IDL 属性和输入元素的标签 IDL 属性在获取时必须返回该 NodeList 对象,并且必须始终返回相同的值,除非此元素是输入元素其类型属性处于隐藏状态,在这种情况下,它必须改为返回 null。
浏览器兼容性可以在caniuse.com link找到
【讨论】:
以上是关于如何获取复选框的文本?的主要内容,如果未能解决你的问题,请参考以下文章