Arranging Checkbox Answers in Multiple Columns

Overview

This solution article explains how to collect the answers in a multiple-checkbox List field and arrange them in parallel columns using JavaScript.

Problem

When you have a large number of checkboxes related to a single question, their arrangement on the page can become unwieldy and ugly.

Background

To approach this problem and find a viable solution, we need to understand how the answer elements are placed on the rendered page in a Service Item.

Here's what the page looks like in Firebug:

As you can see, the questionLayer contains the questionLabel and the questionAnswer. And under the questionAnswer element, we have as many answerCheckbox elements as the question needs. The solution to our problem will be to wrap the answerCheckbox items in separate divs, with each successive div floating next to the first (i.e, "float:left").

The JavaScript Code

<script type='text/javascript'>
// Assemble multiple checkboxes in an answer evenly in columns.
function columnizeCheckboxes(labelName, requestedColumns, columnWidth) {
    "use strict";
    // Find the element.
    var selectorString  = "div[class~=\"questionAnswer\"]";
    selectorString += "[label=\"" + labelName + "\"]";
    var parentElement = $(selectorString);

    // Create a <div> string to contain the checkboxes.
    var divString = '<div style=\"float:left; width: ';
    divString += columnWidth + 'px;\"></div>';
    var wrapperDiv = $(divString);
   
    var answerCheckboxes = parentElement.children();
    var totalCheckboxes = answerCheckboxes.size();
    var checkboxesPerColumn = Math.ceil(totalCheckboxes / requestedColumns);

    // Loop over the columns in a given chunk and apply the div.
    var builtColumns = 1;
    for (var i = 0; builtColumns < requestedColumns; i += checkboxesPerColumn) {
        var elem = null;
        elem = answerCheckboxes.slice(i, i + checkboxesPerColumn);
        elem.wrapAll(wrapperDiv);
        builtColumns++;
    }
}
</script>

We can add this function to the CustomHeaderContent field on our Pizza Test Service Item and test it in Firebug's JavaScript console. The function takes three arguments:

1. The label of the overall question field.
2. The number of columns we want the checkboxes to fit in.
3. The width in pixels for each column.

Note:  We'll start with the checkboxes arranged in a single vertical column.

Suppose we want to arrange our 23 topping selections in 5 columns, where each column is 100 pixels wide. We can test it out on the console, like this:

Just press <Enter>, and the function executes. And the result looks like this:

Applying the Solution

We need to call the function on the page where the checkbox List question appears. Since the function call needs to occur on page load, we'll add it as a Page Event.

This time, we'll set it for three columns, where each has a width of 150 pixels.

Naturally, in this case we use single quotes around our question label. Now when we open the Pizza Test Service Item, the checkboxes sort themselves neatly into 3 columns of equal width:

And we're done!

Addendum

Actually, we're not quite done. It turns out that this code can disrupt the normal behavior of a review page, so we'll want to add another page load event that explicitly disables the fields when in review mode.

That line of JQuery code sets the 'disabled' attribute to true on every existing checkbox on the page.

$('input[type=\"checkbox\"]').attr('disabled', true);

Note:  Many thanks to Andre, who wrote the original version the "columnizer" code.

Related