<span>
<img src="img/icon.png" alt="" />
<label><input type="radio" name="" /> Label here</label>
</span>
I want the whole <span> to be clickable, not just the radio input. How do I do it with jQuery?
views:
58answers:
5
A:
$("span").click(function(){
var radio = $(this).find('input:radio');
//do whatever with the radio button
});
I believe should do it.
Psytronic
2010-02-03 14:32:13
+3
A:
You could do it without jQuery by just making the <span> the <label> instead:
<label for="some-id">
<img src="img/icon.png" alt="" />
<input type="radio" name="" id="some-id" /> Label here
</label>
Jordan
2010-02-03 14:32:23
.. but that still won't work in IE. :)
Nimbuz
2010-02-03 14:36:37
Yes it will. IE respects labels just like every other browser.
Jordan
2010-02-03 17:31:50
+5
A:
Well, the easiest solution would be to wrap everything inside the <label> tag, like this:
<label for="foo">
<img src="img/icon.png" alt="" />
<input type="radio" name="" id="foo" />
</label>
When you specify an for attribute to label, and the same id to the field, the label becomes clickable and will activate the corresponding input.
But, if you for some reason need to do it in jQuery, this should work:
$('span').click(function() {
$(this).find('input').click();
return false;
});
Tatu Ulmanen
2010-02-03 14:32:26
you don't need the `for` attribute if the input is already inside the label
Raveren
2010-02-03 14:38:15
@Raveren, you're correct but I like to keep it in there, it adds a bit readability in my opinion.
Tatu Ulmanen
2010-02-03 14:39:24
Wait, wouldn't this cause something of an infinite loop because of event bubbling? Or am I mistaken? EDIT: Just tested it, and it does. You should use .select() instead of .click().
patrick dw
2010-02-03 14:40:40
I was wrong about .select(). It should be $(this).find('input').attr({checked:true});
patrick dw
2010-02-03 14:50:38
@patrick, you're right, I corrected my sample. Simple `return false;` is enough. :) Changing the `checked` attr would require to first check the state and set it to the opposite, your example sets it always on.
Tatu Ulmanen
2010-02-03 14:52:53
@Tatu Ulmanen: Since these are radios and not checkboxes, there's no need to check the state. Clicking on an already selected radio should not unselect it.
patrick dw
2010-02-03 14:57:14
@patrick, you're right, didn't take that into account. Either way, my example should be working now.
Tatu Ulmanen
2010-02-03 15:06:15
@Tatu Ulmanen: I know this one is a couple days old, but the **infinite loop** remains. Returning false does nothing if it is after the click() causing the loop. Better to correct it so that a future reader doesn't use it. Sorry.
patrick dw
2010-02-05 22:35:46
+1
A:
This is a better way.
$('span').click(function() {
$(this).find('input').attr({checked:"checked"});
});
Just keep in mind that you are adding a click event to all spans. Better would be to have a class on the span and reference that.
$('.myClickySpan')...
<span class='myClickySpan'>...
patrick dw
2010-02-03 14:55:06