Render ChoiceField RadioButtons and CheckBoxes horizontally

When making a simple questionaire sharepoint list, we found the vertical orientation of the choices not the best option. We wanted the choices to render on one single line.

Instead of looking at the server's side of rendering things, I directly went for the clientside approach.

First, want we do not want:

Moving on to what we do want:

Here's how:

When looking into the HTML we find each group of options wrapped in a table:

<table cellpadding="0" cellspacing="1">
  <tr>
    <td>
       <span class="ms-RadioText" title="Answer 1.1">
         <input type="checkbox"/>
         <label>Answer 1.1</label>
       </span>
    </td>
  </tr>
  ... (remaining options)
</table>

My idea was to get the spans out of the table, leaving us with 4 spans in a row. Not a hard thing to do when you take jQuery in consideration: We have to unwrap it!

So, for starters, let me show an example of what unwrapping means.

<Tag1><Tag2><Tag3>InnerText</Tag3></Tag2></Tag1>

Unwrap Tag3 results in:

<Tag1><Tag3>InnerText</Tag3></Tag1>

Taking this approach to our choicefields:

1. Unwrap each span with class RadioText out of its cell
2. Unwrap the span out of the row it just landed in
3. Unwrap the group table's first span out of it's tbody
4. Unwrap this first span out of the table.

How? Look below:

function _spBodyOnLoadWrapper() {
var Spans = $('SPAN.ms-RadioText');
Spans.unwrap();
Spans.unwrap();

Spans = $('SPAN.ms-RadioText:first-child');
Spans.unwrap();
Spans.unwrap();
}

or, the short version:

function _spBodyOnLoadWrapper() {

$('SPAN.ms-RadioText').unwrap().unwrap();

$('SPAN.ms-RadioText:first-child').unwrap().unwrap();

}

Hope this was of some value for you.