Greater area for radio selection

问题

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

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

回答2:

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

回答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>

回答4:

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>

回答5:

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

I believe should do it.

来源：https://stackoverflow.com/questions/2192596/greater-area-for-radio-selection