troubleshooting Question

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

Avatar of jxbma
jxbmaFlag for United States of America asked on
7 Comments1 Solution717 ViewsLast Modified:

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>

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' );

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

Any help/suggestions would be greatly appreciated.

Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 7 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 7 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros