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 4th + 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. 

  1. function ArrangeCheckBoxes()  
  2. {  
  3.     var len = $("#choiceField table tbody tr td .ms-RadioText").length;  
  4.     temp = len - 1;  
  5.     count = 0;  
  6.     var startingElement;  
  7.     for (i = 0; i < len; i = i + 4) {  
  8.         if (count == temp) break;  
  9.         startingElement = $("#choiceField table tbody tr td .ms-RadioText:eq(" + i + ")").closest('tr')  
  10.         count++;  
  11.         for (j = i + 1; j <= i + 3; j++) {  
  12.             if (count == temp) break;  
  13.             $("#choiceField table tbody tr td .ms-RadioText:eq(" + (j) + ")").closest('td').appendTo(startingElement);  
  14.             count++;  
  15.         }  
  16.     }  
  17. }  



Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now