1

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>
Community
  • 1
  • 1
AbuMariam
  • 3,282
  • 13
  • 49
  • 82

4 Answers4

5

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.

ᔕᖺᘎᕊ
  • 2,971
  • 3
  • 23
  • 38
  • add stopPropagation to the click of radio buttons. and then you will get a 1 up :) – Tejasva Dhyani Aug 03 '15 at 12:05
  • You have to put stopPropagation on click of radio buttons not the spans containing them – Tejasva Dhyani Aug 03 '15 at 12:10
  • @TejasvaDhyani whoops! The effect is still *almost* the same - it's just that the click on radio button won't work! Sorry! Updated! :) – ᔕᖺᘎᕊ Aug 03 '15 at 12:12
  • Thats fine, atleast for now. Try making it fool proof. Consider a case where the user clicks on the radio button again, but somehow he is not able to reverse its status.(the default radio button behavior do not support unchecking the radio). You can implement this functionality as well if you want. cheers ! – Tejasva Dhyani Aug 03 '15 at 12:15
1

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();
});
Raidri
  • 17,258
  • 9
  • 62
  • 65
0

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
      } 
 });
Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
  • I think the problem with this is when the radio button is clicked, then also the span's click will trigger and thus again working on the same radio button. In that case, you must provide with stopPropagation in case of click on radio buttons. However, I think that you can get away with the radio buttons but consider if they were checkboxes. – Tejasva Dhyani Aug 03 '15 at 11:57
  • Yes , this code is an aproximation. Obviously there are lots of tests to make. – Marcos Pérez Gude Aug 03 '15 at 12:00
0

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>