How can I add jQuery UI button widget to my radio_button_tag?

I'm brand new to javascript and am having trouble finding a way to include the jQuery UI into my app. I currently have a form containing some radio buttons to let me filter venue records displayed on the index page by type. I would like to include the jQuery button widget to give the look of tabs. I have the demo setup from the jQuery site working on my app but its only there for looks at the moment.

http://jqueryui.com/demos/button/#radio

My current filter form:

  <form class="f开发者_运维知识库ilter_form", method="get">
    <fieldset class="filter_form_fieldset">
      <legend class="filter_form_fieldset_legend">Choose a venue type:</legend>
      <% Venuetype.all.each do |v| %>
        <span class="filter_form_radio_button_label">
          <%= radio_button_tag("venuetypes[]", v.id, false)%>
          <%= v.name %>
        </span>
      <% end %>
    </fieldset>
    <input type="submit" value="Filter" />
  </form>

Thanks very much for any help!

Assuming that you're using checkboxes (see comments for original question):

Include the necessary files into you header or footer (remember that jQuery UI needs a CSS file as well — or custom styles!) if you haven't done so yet.

Then restructure your mark-up to match something like this:

<fieldset class="filter_form_fieldset venuetypes">
  <legend class="filter_form_fieldset_legend">Choose a venue type:</legend>
  <% Venuetype.all.each do |v| %>
    <%= check_box_tag 'venuetypes[]', v.id, false, :id => "venuetype-#{v.id}" %>
    <label for="venuetype-<%= v.id %>"><%= v.name %></label>
  <% end %>
</fieldset>

Call the buttonset method when the DOM has been loaded e.g. in your application.js:

$(function() {
    $('.venuetypes').buttonset();
});

That should do it — here's a working example: http://jsfiddle.net/DZx3z/