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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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:
Chris StanyonWebDevCommented:
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?
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

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:
Chris StanyonWebDevCommented:
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


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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?

RobOwner (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

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.