Greater area for radio selection

Question

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

Answer 1

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'>...

Answer 2

It looks like you're not using the for attribute of the label. Maybe doing so will help you

<input type="radio" name="r" id="r" />
<label for="r">
   <img src="img/icon.png" alt="" />
   Label here
</label>

Answer 3

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>

Answer 4

$("span").click(function(){
  var radio = $(this).find('input:radio');
  //do whatever with the radio button
});

I believe should do it.

Answer 5

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