CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
user1216398
user1216398

Reputation: 1960

How do I retrieve text from an input checkbox with jquery?

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?

Upvotes: 0

Views: 523

Answers (8)

mzh
mzh

Reputation: 525

you can retrieve text of checked checkbox this way using jquery.

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

Upvotes: -1

user1905658
user1905658

Reputation: 1

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

Upvotes: -1

Joseph Silber
Joseph Silber

Reputation: 220176

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/

Upvotes: 1

Ram
Ram

Reputation: 144739

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.

Upvotes: 2

Blazemonger
Blazemonger

Reputation: 93003

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.

Upvotes: 0

The Alpha
The Alpha

Reputation: 146269

Try this

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

DEMO.

Upvotes: 0

jeschafe
jeschafe

Reputation: 2683

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

Upvotes: 0

David Thomas
David Thomas

Reputation: 253506

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.

Upvotes: 1

Related Questions