Arranging the Long List of Choice Field Values in Parallel in SharePoint Using JavaScript

Introduction

This article explains how to arrange a long list of choice field values in parallel and on the click of “Select all” for the choice fields all the choice values will be selected in SharePoint using JavaScript.

Prerequisites

1. Ensure you have a SharePoint site.
2. Ensure you have the following JavaScript files:
     - SPServices.0.7.2.js
     - jqueryv1.8.3.js

Use the following procedure.

Create a Custom List in SharePoint called “Test”.

Now navigate to ListList settings.

Create a new field called “States” and select the data type to be choice field and select the “checkboxes” option and click on OK.

Now navigate to the new form.aspx.

Edit the page and add the content editor webpart.

Now add a reference to jQuery JavaScript library v1.8.3 and SPServices-version 0.7.2 jQuery files.

<script type="text/JavaScript" src="/ sites/Devsite /SPServices.0.7.2.js"></script>
<script type="text/JavaScript" src="/sites/Devsite/jqueryv1.8.3.js"></script>

Now add the following lines of code.

<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("display");

function display()
{


  $().SPServices.SPArrangeChoices({
     columnName: "States",
     perRow: 4
     });
 var oControl = findacontrol("States");

    var inputTags = oControl.parentElement.getElementsByTagName("input");

    for(var i=0; i<inputTags.length; i++)
    {
        var valueTag = inputTags[i].parentElement.getElementsByTagName("LABEL");
        if(valueTag[0].innerHTML.indexOf("Select All States") > -1)
        {

            inputTags[i].attachEvent("onclick", ToggleAllStates)
        }
    }
}
function ToggleAllStates()
{

    var oControl = findacontrol("States");
    var inputTags = oControl.parentElement.getElementsByTagName("input");
    var checkAllStates = false;

    for(var i=0; i < inputTags.length; i++)
    {
        var valueTag = inputTags[i].parentElement.getElementsByTagName("LABEL");
        if(valueTag[0].innerHTML.indexOf("Select All States") > -1)
        {
            if(inputTags[i].checked)
            {
                checkAllStates = true;
            }
        }
    }
    if(checkAllStates)
    {
        for(var i=0; i < inputTags.length; i++)
        {
            var valueTag = inputTags[i].parentElement.getElementsByTagName("LABEL");
            if(valueTag[0].innerHTML.indexOf("Select All States") > -1)
            {
                inputTags[i].checked = false
            }
            else
            {
                inputTags[i].checked = true
            }
        }
    }
}
function findacontrol(FieldName)
{

   var arr = document.getElementsByTagName("!");
   // get all comments
   for (var i=0;i < arr.length; i++ )
   {
      // now match the field name
      if (arr[i].innerHTML.indexOf(FieldName) > 0)
      {
        return arr[i];
      }
   }
}
</script>

Testing

Now, add a new item to the Test list.

You will be able to see the states choice values are arranged in parallel and on selection of the Select All choice all the states will be selected.

Summary

Thus in this article you saw how to arrange the long list of choice field values in paralell and on the click of the “Select all” choice fields all the choice values will be selected in SharePoint using JavaScript.