Large 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 to <span>be clickable, not just the radio input. How to do it using jQuery?

Answer 1

This is the best way.

$('span').click(function() {
    $(this).find('input').attr({checked:"checked"});
});

Just keep in mind that you are adding a click event for all ranges. It would be better to have a class on the span and a link to it.

$('.myClickySpan')...

<span class='myClickySpan'>...

Answer 2

Well, the easiest solution would be to wrap everything inside the tag <label>, for example:

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

When you specify the attribute forfor the label and the same idin the field, the label becomes interactive and activates the corresponding input.

- jQuery, :

$('span').click(function() {
    $(this).find('input').click();
    return false;
});

Answer 3

You can do this without jQuery by simply doing <span> <label>:

<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 think I should do it.

Answer 5

It looks like you are not using the for label attribute . Maybe this will help you

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