SharePoint Form Radio Buttons: Switch from Vertical to Horizontal with jQuery

3 minute read

UPDATE 2010-05-27: Back in January, 2010, I added a generalized function called $().SPServices.SPArrangeChoices to accomplish this to my SPServices library. It works basically the same way, but can be easily called with the name of the column for which you’d like to rearrange the radio buttons or checkboxes.  It also includes an option to randomize the order of the values displayed.  Check it out!

I’ve seen a few threads over on the MSDN SharePoint – Design and Customization forum about doing this, but never felt the need to make it happen myself.  My answer has always been “jQuery would be the way to go with this”.  Well, I was building a custom form the other day, and those pesky vertical radio buttons got to bugging me, too, so I decided to fix ’em with jQuery.

The form in question is a multi-item edit form, with one row per item, which lets the user set the column values and then check in each item using SharePoint’s Lists Web Services.   And, yes, I’m using my jQuery Library for SharePoint Web Services for this! (The released version doesn’t have the CheckInFile operation in it; what better way to test adding it in than to really use it?  Next release, it’ll be there.)

Each row contains these column types: Name, Lookup, Lookup, and finally, the radio buttons.  Because I’ve customized the form, it’s easy for me to add an id to the table cell which will contain the radio buttons when the page is rendered: 

<td id="AuditRequired{$Pos}">
    <SharePoint:FormField runat="server" id="ff4{$Pos}" ControlMode="Edit" FieldName="Audit_x0020_Required" ItemId="<a href="mailto:{@ID">{@ID</a>}" __designer:bind="{ddwrt:DataBind('u',concat('ff4',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Audit_x0020_Required')}"/>
    <!--<SharePoint:FieldDescription runat="server" id="ff4description{$Pos}" FieldName="Audit_x0020_Required" ControlMode="Edit"/>-->

 The reason for adding the id to the table cell is that, surprisingly, SharePoint doesn’t give you anything good to select on for the radio button group.  If you haven’t customized the form, then your initial selector would need to be more complicated. Note that I’m being a good doobie and making each id unique by appending the $Pos variable (this is an indicator for the row number which SharePoint generates, and takes the form ‘_1’, ‘_2’, etc.).  Making the ids unique is good practice for cross-browser compatibility.

With the id in place, my jQuery looks like this:

$().find("[id^='AuditRequired']").each(function() {
  var radios = "";
  $(this).find("tr").each(function() {
    radios += $(this).html();

Let’s break that down a little:

  • Line 01: Finds all of the table cells with the id starting with (that’s the ^= bit) ‘AuditRequired’, and then does an each loop for them
  • Line 03: Finds each table row in $(this), which references the table cell found in Line 01
  • Line 04: Appends the contents of that table row (the table cell containing the radio button) to the radios variable.
  • Line 06: Finds the first table row, sets the html for that row to the radios variable containing all of the cells with radio buttons, then finds all of the other rows and removes them.

The net effect of this is to convert the view of the radio buttons from the default vertical arrangement to a horizontal arrangement, which tightens up my form nicely. Simple!



  1. Awesome. I found one other example of how to do this and it did not work. How would this be altered to define the amount of columns acceptable? Like 4 across and 5 down instead of 20 accross?

    • Allan:

      I like the word “awesome”. Glad you found this useful.

      After I posted tihs, I had the same thought. I think that I will be adding this into my jQuery Library for SharePoint Web Services in the near term. A function something like this would be useful, eh?

      columnName: “Audit Required”,
      radioButtonsPerRow: 4

      Are there any other options you can think of that would be useful?


  2. I have another solution for the same

    $(‘.ms-RadioText’).each(function() {
    str1 = $(this).parents()[2].innerHTML;
    str1 =str1.replace(new RegExp(”, ‘g’),””);
    str1 =str1.replace(new RegExp(”, ‘g’),””);
    str1 =str1.replace(new RegExp(”, ‘g’),””);
    str1 =str1.replace(new RegExp(”, ‘g’),””);
    $(this).parents()[2].innerHTML = “” + str1 + “”;
    } catch(err) {

    } });});

  3. Most Awesome, Marc! This was a fantastic solution and a
    novel approach. Worked like a charm. Is this cross browser
    compatible? Great work, and thanks. On an unrelated note, can you
    point me to the tool you use for rendering your blog’s code
    snippets? I love the copy to clipboard and view source

    • Jill:

      Actually, it should work in 2010, though it may require a small tweak or two. I’d suggest, though, that you use the SPServices function, as it’s far more robust.


    • Fatima:

      Since it’s really an SPServices question at this point, why don’t you post what you are doing and your code on the SPServices Discussions? You can easily post and format code there, which is harder here. I’m not sure what all the changes are you’re triying to do with the form, but let’s start with a fresh copy of one of the default forms and get that working for you. You can customize from there.


  4. Hi Marc,

    I tried it and it didn’t work. I placed the code in the form, a script line connecting to the jquery. Don’t know why?


Have a thought or opinion?