How do I use jquery-ui to create a horizontal group of styled radio buttons?


I'm trying to create a set of horizontally aligned/styled radio buttons that look like the attached screen shot.

I was basically following the example outlined in the following post:

The html looks like this:
<div id="radio-jquery-ui">
  <input id="radio1" name="radio" type="radio" /><label for="radio1">Choice 1</label>
  <input id="radio2" name="radio" type="radio" /><label for="radio2" class="ui-state-active">Choice 2</label>
  <input id="radio3" name="radio" type="radio" /><label for="radio3">Choice 3</label>

Open in new window

The jquery looks like this:
$(document).ready(function() {
  $( "#radio-jquery-ui" ).buttonset();
  $( "#radio-jquery-ui :input" ).each(function(){
    $label = $(this).next();<span class="Apple-tab-span" style="white-space: pre;"> </span>
      .append($("<td align='center'/>").addClass('2').html( ($(this).attr('checked'))? 'checked' : 'no' ) )
      .append($("<td/>").addClass('3').html( ($label.hasClass('ui-state-active'))? 'ui-state-active' : 'not active' )));
  $( "#radio-jquery-ui label" ).click(function(){
    $( "#radio-jquery-ui label" ).each(function(){
      $input = $(this).prev();
      $("tr [id='"+$(this).attr('for')+"'] td.2").html( ($input.attr('checked'))? 'checked' : 'no'  );
      $("tr[id='"+$(this).attr('for')+"'] td.3").html( ($(this).hasClass('ui-state-active'))? 'ui-state-active' : 'not active' );

Open in new window

I've tried an assortment of different css style settings, but have not been successful.

Any help/suggestions would be greatly appreciated.

jxbmaSoftware ConsultantAsked:
Who is Participating?
Chris StanyonConnect With a Mentor Commented:
I would give your radio buttons a value and a default 'checked' though, otherwise they're meaningless when posted.

<div id="radioButtons">
  <input id="radio1" name="radio" type="radio" value="choice 1" />
  <label for="radio1">Choice 1</label>
  <input id="radio2" name="radio" type="radio" value="choice 2" checked />
  <label for="radio2" class="ui-state-active">Choice 2</label>
  <input id="radio3" name="radio" type="radio" value="choice 3" />
  <label for="radio3">Choice 3</label>

Open in new window

RobOwner (Aidellio)Commented:
I'm setting up an example for you now but you have an issue in your javascript:

$label = $(this).next();<span class="Apple-tab-span" style="white-space: pre;"> </span>
The random html in this section will cause errors and probably why it isn't working
RobOwner (Aidellio)Commented:
it's just that you need to use the .after() to append the span rather than assign it to the variable:

$label = $(this).next();<span class="Apple-tab-span" style="white-space: pre;"> </span>
$label = $(this).next().after('<span class="Apple-tab-span" style="white-space: pre;"> </span>');

working example:
The new generation of project management tools

With’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Chris StanyonCommented:
Don't really understand what all the extra code is about. If you just want a nice looking set of radio buttons, as per your screen shot, then all you need to do is:

$( "#yourRadioWrapper" ).buttonset();

Open in new window

None of that extra stuff is needed. What makes you think it is?
RobOwner (Aidellio)Commented:
(no points, just a +1 for @Chris)

A very good point @ChrisStanyon.  if you follow the and scroll down to the bottom of the page you'll see what he means.

See demo:
jxbmaSoftware ConsultantAuthor Commented:
Yes, I was working off the example provided on a website.
Clearly the poster didn't follow the rule of:
When you're posting a sample on your tech blog/site:
1) Post a clear example illustrating the solution
2) Post something that actually works

(Sorry, I've been reading a lot of sites lately).

You both are spot on.
I'm still not seeing it working, but I think I know what the issue is.
We are using several different 3rd party libraries and there are most probably
some name collisions with the jquery and css items.

As a relatively newbie, is there a good/standard way to "frame" css files/jquery so 1 UI library does not clobber another? Or, do I have to go and figure out what the pieces I need are and rename them so that they are unique?

RobConnect With a Mentor Owner (Aidellio)Commented:
You should use the noConflict() and assign it to a variable so that your $ might become $j etc

another way when you have two jquery versions, but how many do you have??
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

Open in new window

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.