Adding MultiSelect CheckBox on MS CRM 2011 Form

Following steps to create multi select checkbox control on MS CRM 2011 form.

1. Create a picklist fields with required options and add it to your CRM form.
2. this picklist field will be converted to checkbox control at runtime.
3. you need to create one more text field in CRM and place it on the form in hidden mode , this field is required to store and read values selected in CheckBox Control.

Call the function below on load of the form

in the below example  "ap_typeofbuilding" is my Picklist control which will be converted to CheckBox Control for Multi select options , and "ap_btypetext" is my text field to read and store values selected in checkbox control.



gMultiSelectBTList = function () {

    // PL - the picklist attribute; PLV - used to save selected picklist values 

    var PL = document.getElementById("ap_typeofbuilding");
    var PLV = document.getElementById("ap_btypetext");

    var picklist = "ap_typeofbuilding";
    var textfield = "ap_btypetext";

    if (!PLV || textfield == '') { PLV = null; }
    if (PL != null) {

        PL.style.display = "none";

        //PLV1.style.display = "none"; 

        // Create a DIV container 

        var addDiv = document.createElement("<div style='overflow-y:auto; height:80px; border:1px #6699cc solid; background-color:#ffffff;' />");

        //  var addDiv1 = document.createElement("<div style='overflow-y:auto; height:80px; border:1px #6699cc solid; background-color:#EAF3FF;' />"); 

        PL.parentNode.appendChild(addDiv);

        // Initialise checkbox controls 

        for (var i = 1; i < PL.options.length; i++) {
            var pOption = PL.options[i];

            if (!IsChecked(pOption.text))

                var addInput = document.createElement("<input type='checkbox' name=" + pOption1.text + " value=" + pOption1.value + " style='border:none; width:25px; align:left;' onclick='picklistOnClick(" + picklist + "," + textfield + ")' />");

            else

                var addInput = document.createElement("<input type='checkbox' name=" + pOption1.text + " value=" + pOption1.value + " checked='checked' style='border:none; width:25px; align:left;' onclick='picklistOnClick(" + picklist + "," + textfield + ")' />");

            var addLabel = document.createElement("<label />");

            addLabel.innerText = pOption.text;

            var addBr = document.createElement("<br>"); //it's a 'br' flag 



            PL.nextSibling.appendChild(addInput);
            PL.nextSibling.appendChild(addLabel);
            PL.nextSibling.appendChild(addBr);

        }



        // Check if it is selected 

        function IsChecked(pText) {

            if (!PLV) return;

            if (PLV.value != "") {

                var PLVT = PLV.value.split("|");

                for (var i = 0; i < PLVT.length; i++) {

                    if (PLVT[i] == pText)

                        return true;

                }

            }

            return false;

        }

        picklistOnClick = function (oPL, oPLV) {

            if (!oPLV) return;

            oPLV.value = "";

            var getInput = oPL.nextSibling.getElementsByTagName("input");

            for (var i = 0; i < getInput.length; i++) {
                if (getInput[i].checked) {

                    oPLV.value += getInput[i].nextSibling.innerText + "|";
                }

            }

            //MUST DO THIS TO TRIGGER A SAVE EVENT

            var btypetext = Xrm.Page.data.entity.attributes.get("ap_btypetext");
            btypetext.setValue(PLV.value);

        }

    }

}

This is another function which will help you to read selected values in text field and selected them in CheckBox Control ( this is for existing records )

function ReadBTPickList()
{
    var PL = crmForm.all.ap_typeofbuilding;
    var getInput = PL.nextSibling.getElementsByTagName("input");
    var allbtype = Xrm.Page.getAttribute("ap_btypetext").getValue();
    if (allbtype != null) {
        var btype = allbtype.split('|');

        for (var i = 0; i < btype.length - 1; i++) {
            for (var j = 0; j < getInput.length - 1; j++) {
                if (getInput[j].name == btype[i]) {
                    getInput[j].checked = true;
                }
            }
        }

    }
}