Get checkbox value in multi select picklist

Question

I have a few checkboxes displayed on a page which need to be saved to the server as a multi-select picklist. How do I do this? The checkboxes value is set to true or false. But the picklist has different values and is a comma seperated string i believe(?). Does anyone have an example of how to do this with javasctipt? I still need to construct the controller so any help with this would be helpfull. Here is some example code of the checkboxes:

<label class="slds-checkbox">
    <ui:inputCheckbox class="slds-input" value="{!v.identityRequest.Sales_Management__c}" change="{!c.onChange}" />
    <span  aura:id="salesManagement" class="slds-checkbox--faux"></span>
</label>
<label class="slds-checkbox">
    <ui:inputCheckbox class="slds-input" value="{!v.identityRequest.Service_Management__c}" change="{!c.onChange}" />
    <span aura:id="serviceManagement" class="slds-checkbox--faux blackColor"></span>
</label>
<label class="slds-checkbox">
    <ui:inputCheckbox class="slds-input black" value="{!v.identityRequest.Service_Technician__c}" change="{!c.onChange}" />
    <span aura:id="serviceTechnician" class="slds-checkbox--faux" ></span>
</label>

Answer 1

You could send the information from your checkbox fields to your controller and have the controller update the server based on which checkbox fields are selected so your code would look something like the following:

Visualforce Page

<script type="text/javascript">

    Visualforce.remoting.timeout = 120000; // Set timeout at page level

    function SendCheckboxData() {
        var checkbox1 = document.getElementById('chckbx1').value;
        var checkbox2 = document.getElementById('chckbx2').value;
        var checkbox3 = document.getElementById('chckbx3').value;

        // This remoting call will use the page's timeout value
        Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.SampleController.UpdatePicklist}',
            checkbox1,
            checkbox2,
            checkbox3,
            handleResult
        );
    }

    function handleResult(result, event) { ... }
</script>

<label class="slds-checkbox">
    <ui:inputCheckbox id="ckckbx1" class="slds-input" value="{!v.identityRequest.Sales_Management__c}" change="{!c.onChange}" />
    <span  aura:id="salesManagement" class="slds-checkbox--faux"></span>
</label>
<label class="slds-checkbox">
    <ui:inputCheckbox id="chckbx2" class="slds-input" value="{!v.identityRequest.Service_Management__c}" change="{!c.onChange}" />
    <span aura:id="serviceManagement" class="slds-checkbox--faux blackColor"></span>
</label>
<label class="slds-checkbox">
    <ui:inputCheckbox id="chckbx3" class="slds-input black" value="{!v.identityRequest.Service_Technician__c}" change="{!c.onChange}" />
    <span aura:id="serviceTechnician" class="slds-checkbox--faux" ></span
</label>

Controller

@RemoteAction
global static String UpdatePicklist(Boolean check1, Boolean check2, Boolean check3) {
    String picklistString = "";
    if(check1)
        picklistString += "Sample value 1;";
    if(check2)
        picklistString += "Sample value 2;";
    if(check3)
        picklistString += "Sample value 3;";

    picklistString = picklistString.Substring(0, picklistString.length() - 1);
    acc.Picklist__c = pickListString;
    update acc;
}

This is more of a sample and will need to be updated based on what your fields are and what your controller is called but this should work for you.