Reputation: 1960
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
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
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
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
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
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
Reputation: 146269
Try this
var checkedTxt=$('.checkbox :checked').parent().text();
console.log(checkedTxt);
Upvotes: 0
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.
Upvotes: 0
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);
});
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