Use jQuery to select all labels of radio button group

Question

I am trying to write a function that will be called if any of the labels for a group of radio buttons are clicked. So I'd like a way to refer to all the labels of the radio button group.

From another thread (this one) I read that I could do

$('#[radio_name] label').click(function(){
    ...
});

where [radio_name] is the name of the group of radio buttons. In fact, I'm just trying to implement the code in the referenced thread. Unfortunately it doesn't work for me, don't know why.

Some other threads suggested you could select a specific label with $('label[for=[radio_option_id]]'), where [radio_option_id] is the id of the radio button to which the label applies. However, that only works to select a single label. I need to select all the labels in the group, which have different ids.

EDIT: here is the more complete context as requested below.

var content = "<form id='question_form' name='question_form' action=''>" + page.text;
content += "<div id='radio_options'>";
for ( var i=0; i<page.answers.length; i++ ) {
    content += "<input type='radio' name='radio_option' id='radio_option_" + i.toString() + "' value='" + i.toString() + "'><label for='radio_option_" + i.toString() + "'>" + page.answers[i] + "</label><br>";
}
content += "</div>";
content += "<p><input type='submit' id='submit_button' name='submit_button' value='Submit'></p></form>";
display_loc.html( content );

@Blowsie, done, in the original post. – baixiwei Jan 10 '13 at 16:46 — baixiwei, Jan 10 '13 at 16:46

Blowsie · Accepted Answer · 2013-01-10T16:45:42.583

3

Use the ATTR contains selector

$('label[for*="radio"]').click(function(){
    ...
});

This would work for and label that contains radio within the for attribute

Eq.

<input type="radio" name="emotion" id="radio_sad" />
<label for="radio_sad">Sad</label>
<input type="radio" name="emotion" id="radio_happy" />
<label for="radio_happy">Happy</label>

Update

For you html code you can do the following.

$('#radio_options label').click(function(){

});

edited Jan 10 '13 at 16:45

answered Jan 10 '13 at 16:39

Blowsie

40,239
15
88
108

I don't understand. The for of the labels is radio_option_id, not radio_name, so why would that work to select the labels? Anyway, I tried it, and it didn't work. – baixiwei Jan 10 '13 at 16:43
@baixiwei Always hard to answer when there is no HTML as there can be many different approaches. I added some code that will work for you. – Blowsie Jan 10 '13 at 16:49
That works fine, thanks! Any idea why the original attempt didn't work? – baixiwei Jan 10 '13 at 16:52
The ATTR contains selector as seen in my revised answer should also work fine for your scenario. – Blowsie Jan 10 '13 at 16:53

score 2 · Answer 2 · answered Jan 10 '13 at 16:43

2

It sounds to me that you just need to apply a class to your different labels and access them that way. That way you can group the labels by class.

$('label.className').click(function(){
     ...
});

answered Jan 10 '13 at 16:43

Blake Plumb

6,779
3
33
54

thank you! I had already tried that actually, and it worked OK ... I should have mentioned, but forgot when I made the post. However, isn't there some way to do this without creating an additional class? Why doesn't my original way work? – baixiwei Jan 10 '13 at 16:48
@baixiwei Your original code doesn't work because the `label` is not a child of the `input` but a `sibling`. After seeing your html I was going to post a better solution but Blowsie's solution works. – Blake Plumb Jan 10 '13 at 16:56

Use jQuery to select all labels of radio button group

2 Answers2