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
HTMLjQuery
7 Comments1 Solution717 ViewsLast Modified:
Hi:

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:
http://ameronix.com/blog/2012/07/radio-buttons-using-jquery-ui-buttonset


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>
</div>

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>
    $("table").append($("<tr/>").attr('id',$(this).attr('id'))
      .append($("<td/>").addClass('1').html($label.html()))
      .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.

Thanks,
JohnB
Horizontal-Radio-Buttons.png
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