Javascript 如何使用jquery从输入复选框中检索文本？

我正在尝试检索所选复选框的文本，如下所示：

HTML:

我希望看到：

2 - Critical

我的控制台中没有任何错误。我缺少什么？

您可以尝试：

<input id="cb" type="checkbox" name="priority" value="2" checked="checked">
<label for='cb' class="checkbox"> 2 - Critical</label>

---

请注意：复选框选择器已被弃用。您可以使用输入[type=checkbox]代替。

基于您发布的代码，您为什么希望看到该结果？在该代码中，您从未尝试检索文本。我建议：

$('#priorityContents input:checkbox:checked').each(function() {
    var next = this.nextSibling,
        text = next.nodeType == 3 ? next.nodeValue : '';
    console.log(text);
});

这将迭代给定id元素中的每个选中复选框，查看当前节点（不是jQuery对象）的下一个同级，普通DOM节点，如果该节点是textNode，则nodeType等于3的节点将nodeValue将该节点的文本内容分配给变量

如果它不是textNode，则它将指定一个空字符串。

您想访问label元素，它是输入的父元素：

这是小提琴：

为了提高性能，您应该考虑拆分选择器：

var priorityText = '';

$('#priorityContents input[type="checkbox"]').filter(':checked').parent().each(function() {
    if ( ! priorityText ) {
        priorityText = priorityText + "|";
    }
    priorityText = priorityText + $(this).text();
});

alert(priorityText);​

从：

为了在使用这些选择器时获得最佳性能，首先使用纯CSS选择器选择一些元素，然后使用.filter

---

这里有一些技巧：

首先，只将文本包装在标签中，这对于可用性来说是个好主意。将for属性指定给复选框的ID：

<input type="checkbox" name="priority" id="priority-2" value="2" checked="checked">
<label class="checkbox" for="priority-2">        2 - Critical</label>

---

也就是说，最简单的方法可能是在复选框的data prioritytext属性中添加您想要的任何文本，并在代码中使用.data“prioritytext”提取该文本。

代码中肯定缺少一些内容。比如priorityContents元素，如果您正在搜索它，它是非常重要的

不管怎样，我创建了一个适合我的演示。基本上你错了，我认为是这一部分：

priorityText = priorityText + $(this).text();

实际的checkbox元素不拥有.text。您无需转到父级以获取其中包含的实际值

试试这个

var checkedTxt=$('.checkbox :checked').parent().text();
console.log(checkedTxt);

var name=$this.parent.text

您将获得该复选框的文本 在html中，复选框没有获取文本数据的属性。所以

---

使用parentfunction获取

您可以使用jquery以这种方式检索选中复选框的文本

var value = $(document).find('input[type="checkbox"]:checked').attr('value');

---

@JosephSilber因为我不记得为什么我这么认为，所以我删除了那个部分。关于标签标签是否应该在输入中使用，似乎有不同的文档。我看不出他们有什么理由这样做，因为for=属性是用来将它连接到输入元素的。@JosephSilber任何表单都以表单元素开头，表单元素中放置了控件。大多数控件由输入元素表示，默认情况下，输入元素提供一行文本字段。要标记控件，请使用label元素；标签文本和控件本身位于label元素内部。表单的每个部分都被视为一个段落，通常使用p元素将其与其他部分分开。@Raminson-这正是我的观点。输入在标签内是完全有效的。也就是说，您的代码错误的原因不同；输入和标签之间没有关系。@Raminson-将输入与标签关联的唯一方法是提供输入和ID，然后为标签提供与属性匹配的内容。因为我不喜欢ID乱扔我的代码，所以我更喜欢像OP那样把标签绕在输入上。你的标记无效-输入永远不会关闭。

<input type="checkbox" name="priority" id="priority-2" value="2" checked="checked">
<label class="checkbox" for="priority-2">        2 - Critical</label>

$('#priorityContents input:checkbox:checked').each(function() {
    priorityText = $('label[for="'+$(this).attr('id')+'"]').text();
    ...
});

priorityText = priorityText + $(this).text();

var checkedTxt=$('.checkbox :checked').parent().text();
console.log(checkedTxt);

var value = $(document).find('input[type="checkbox"]:checked').attr('value');