CODEWITHSUNDEEP
javascriptjqueryselector
baixiwei
baixiwei

Reputation: 1029

Use jQuery to select all labels of radio button group

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 );

Upvotes: 2

Views: 2729

Answers (2)

Blowsie
Blowsie

Reputation: 40575

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(){

});

Upvotes: 3

Blake Plumb
Blake Plumb

Reputation: 7209

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(){
     ...
});

Upvotes: 2

Related Questions