Arranging Choice Field’s CheckBoxes On SharePoint Forms

If a choice field in SharePoint is set to Check Box and the choice field values are in a large number, then the field values are arranged vertically. So, I have made an effort to arrange the checkboxes (choice values) horizontally. I am sharing this with a motif to save your time.

In the below code, I have put everything into a function where I first find out the total number of choice values by picking the selector and crawling through the hierarchy of HTML tags to get “.ms-RadioText”.

And then, get the total by using length.

e.g. var len = $("#trainTopic table tbody tr td .ms-RadioText").length;

Then, decide on how many values you need in one row. The loops used in code are as shown below.

e.g. Outer Loop: for (i = 0; i < len; i = i + 4)

Inner Loop: for (j = i + 1; j <= i + 3; j++)

The numbers 4 and 3 in outer and inner loops respectively state that 4 columns will be created or we can say 4 choice values will be put in each row created.

You, then, loop through the full length of choice values and the iterations of this loop will take a jump of 4 counts as the number of columns I need is just 4.

And in every iteration of the outer loop, I find the row in which the 4^th + 1 choice value resides in by picking the choice value in the list and find the <tr></tr> in which it stands.

The inner loop arranges the next 3 choice values i.e. the <td></td> in which it resides in the same row as the first choice value.

And, here we go. 

function ArrangeCheckBoxes()
{
    var len = $("#choiceField table tbody tr td .ms-RadioText").length;
    temp = len - 1;
    count = 0;
    var startingElement;
    for (i = 0; i < len; i = i + 4) {
        if (count == temp) break;
        startingElement = $("#choiceField table tbody tr td .ms-RadioText:eq(" + i + ")").closest('tr')
        count++;
        for (j = i + 1; j <= i + 3; j++) {
            if (count == temp) break;
            $("#choiceField table tbody tr td .ms-RadioText:eq(" + (j) + ")").closest('td').appendTo(startingElement);
            count++;
        }
    }
}