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 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/