Link to home
Create AccountLog in
Avatar of jxbma
jxbmaFlag for United States of America

asked on

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.

Avatar of Rob
Flag of Australia image

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
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:
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?
(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:
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of jxbma


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?

Link to home
Create an account to see this answer
Signing up is free. No credit card required.
Create Account