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 undefined
Last Comment

8/22/2022 - Mon

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: http://jsbin.com/EWuNoNi/1/edit
Chris Stanyon

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?
Your help has saved me hundreds of hours of internet surfing.

(no points, just a +1 for @Chris)

A very good point @ChrisStanyon.  if you follow the http://api.jqueryui.com/button/ and scroll down to the bottom of the page you'll see what he means.

See demo:  http://jsbin.com/ADuCiVA/1/edit
Chris Stanyon

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question

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?

Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.