Making radio button text clickable without adding any HTML

Question

I know if you have radio buttons and you want to make the text clickable, you can wrap the button in a label HTML tag as described here How do you make the radio button text to be clickable too? .

But can this be done without adding any extra HTML (through Javascript or jQuery only)?

What I do have in my particular case is the group of radio buttons is inside a div and each radio and its text has a span (but they all have the same name). Here is an example..

Which team will win the world series in 2015?
   <div id="teams"><span class="team"><input type="radio" name="team" value="11">&nbsp; Cardinals</span> 
 <span class="team"><input type="radio" name="team" value="12">&nbsp; Royals</span> 
 <span class="team"><input type="radio" name="team" value="13">&nbsp; Dodgers</span> 
 </div>

Answer 1

Without extra HTML, using jQuery ( fiddle ):

 $('span.team').css('cursor', 'default').click(function(e) { var cur = $(this).find('input[type="radio"]').prop('checked') $(this).find('input[type="radio"]').prop('checked', !cur); //true turns false and vice versa }); $('input[type="radio"]').click(function(e) { e.stopPropagation(); //otherwise the actual radio buttons won't work properly }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Which team will win the world series in 2015? <div id="teams"> <span class="team"><input type="radio" name="team" value="11">&nbsp; Cardinals</span> <span class="team"><input type="radio" name="team" value="12">&nbsp; Royals</span> <span class="team"><input type="radio" name="team" value="13">&nbsp; Dodgers</span> </div> 

This will change the cursor to match the style of a label elements and also unselect the currently selected radio button on another click.

---

However, you could just change your span 's to label 's - they will work in exactly the same way.

Answer 2

One possibility would be to replace the span elements with label elements by code.
But only do this if the span elements are not used elsewhere in the JavaScript code.

$('span.team').each(function() {
    $('<label>').addClass('team').html($(this).html()).insertAfter($(this);
    $(this).remove();
});

Answer 3

If you can't write new html, you can with jquery:

 // make click in anywhere of the span
 $('span.team').on('click', function() {
      var radio = $(this).find('input[type=radio]'); // the input
      if(radio.prop('checked')) {
          radio.prop('checked', false); // checking false
      } else {
          radio.prop('checked', true); //checking true
      } 
 });

Answer 4

You can force selection on click:

 $(function() { $('span.team').on('click', function(e) { $(this).children('input[name=team]').prop('checked', true); // mark this }); }); 

 span.team { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> Which team will win the world series in 2015? <div id="teams"><span class="team"><input type="radio" name="team" value="11">&nbsp; Cardinals</span> <span class="team"><input type="radio" name="team" value="12">&nbsp; Royals</span> <span class="team"><input type="radio" name="team" value="13">&nbsp; Dodgers</span> </div>