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

Question

I'm trying to retrieve the text for selected check boxes like so:

HTML:

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

jquery:

$('#priorityContents input:checkbox:checked').each(function() {
    if(priorityText.length > 0) {
        priorityText = priorityText + "|";
    }
    priorityText = priorityText + $(this).text();
});

alert(priorityText);

I would expect to see:

2 - Critical

I don't get any errors in my console. What am I missing?

Answer 1

You can try:

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

$('#priorityContents input[type="checkbox"]:checked').each(function() {
    var txt = $(this).next('label').text();
});

please note that :checkbox selector is deprecated you can use input[type="checkbox"] instead.

Answer 2

Based on the code you posted, why would you expect to see that result? At no point in that code have you attempted to retrieve the text. I'd suggest:

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

JS Fiddle demo .

This iterates over each checked checkbox within the element of the given id , looks at the next sibling of the current node (not the jQuery object, the plain DOM node) and, if that node is a textNode (a node of nodeType equal to 3 ) assigns the nodeValue (the text contents of that node) to the variable.

If it's not a textNode , then it assigns an empty string instead.

Answer 3

You want to get to the label element, which is the parent of the input :

$('#priorityContents input[type="checkbox"]:checked').parent();

Here's the fiddle: http://jsfiddle.net/Hk63N/

---

For increased performance, you should consider splitting up the selector:

var priorityText = '';

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

alert(priorityText);​

From the jQuery docs :

To achieve the best performance when using these selectors, first select some elements using a pure CSS selector, then use .filter().

Here's the fiddle for this: http://jsfiddle.net/Hk63N/1/

Answer 4

First, wrap the text only in the <label> tags, which is a good idea anyway for usability. Assign the for attribute to the ID of the checkbox:

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

Then you can target this easily with jQuery selectors:

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

That said, the easiest approach might instead be to add whatever text you want in a data-prioritytext attribute on the checkbox, and extract that with .data('prioritytext') in your code.

Answer 5

There's some stuff definitely missing from your code. Like the #priorityContents elements which is pretty important if you're searching for it.

Anyway I created this demo that works for me. Basically what you have wrong I believe is this part:

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

The actual checkbox element doesn't own the .text(). YOu needt to go up to the parent to get the actual value contained in there.

DEMO

Answer 6

Try this

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

DEMO.

Answer 7

var name=$(this).parent().text();

you will get the text of that checkbox In html checkbox have no attributes to take text data. so use parent() function to take

Answer 8

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

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