如何获取复选框的文本
How I can get the text of a checkbox?
我有以下一组复选框:
<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)"
我会这样处理它:
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
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);
杰斯菲德尔 http://jsfiddle.net/pcQgE/1/
这是一个现代的香草 JS 解决方案,应该适用于查找与复选框关联的标签的一般情况:
function getCheckboxLabel(checkbox) {
if (checkbox.parentNode.tagName === 'LABEL') {
return checkbox.parentNode
}
if (checkbox.id) {
return document.querySelector('label[for="' + checkbox.id + '"]')
}
}
因为根据这个SO答案,有两种方法可以在<input>
和<label>
之间建立关联:
首先,您可以将标签元素包裹在输入元素周围:
<label>Input here: <input type="text" name="theinput" id="theinput"> </label>
另一种方法是使用
for
属性,为其提供 相关输入:<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>
您可以使用同级选择器:
var id = "mensajes_receptores_list_5"
alert( document.querySelector("#"+id+"+ label").innerText );
这将循环
访问所有文本并将其打印到控制台。 例如,您也可以通过使用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/
你可以使用 jQuery。例:
var label = $("#mensajes_receptores_list_5").next("label").text();
alert(label)
大多数现代浏览器都允许您通过 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 链接中找到
相关文章:
- 复选框与文本内联-JS问题
- 根据文本值禁用复选框
- 使用javascript提交表单并从字段/单选框/复选框/文本区域获取数据
- Javascript选中/取消选中所有复选框并将值写入文本区域
- 获取文本框中所有选定复选框的值
- 动态选中文本区域中现有项目的复选框组
- 选中复选框时更改文本框值
- 单击每个表格行中的复选框时启用文本框
- jQuery表 - 如何根据选中的复选框在单元格中写入文本
- 在 AngularJs 中触发文本框的复选框
- 基于复选框 Jquery 更新文本框
- 根据复选框选择 jQuery 更新文本框
- 我无法禁用带有复选框的文本框
- 从选中的复选框中获取所有值,并将其放入文本区域
- 如何使用选中的复选框文本自动填充输入文本字段
- 如何隐藏复选框文本
- 改变输入的火灾功能;使用jQuery标记(复选框/文本框)
- 选中复选框文本不变
- 我怎么能得到一个复选框文本在<光>标记,并在jQuery中的另一个标签中显示
- 可能添加CSS到一些JS样式禁用复选框文本