+ Start a Discussion
Mallikarjuna Reddy 19Mallikarjuna Reddy 19 

How to check all the checkboxes in a lightning:checkboxGroup component dynamically whlie loading the Page?

1.I create lightning:checkboxGroup component. options and value are comming from server controller.
2.i set the options in controller. options are loaded and checkboxes are showing.
3.i set the value in the controller.but checkboxes are not checked dynamically.
can you please help me?
Rahul KumarRahul Kumar (Salesforce Developers) 
Hi Mallikarjuna,
May I suggest you please refer the below link for reference. Let us know if it helps.

Please mark it as best answer if the information is informative.so that question is removed from an unanswered question and appear as a proper solution.

Thanks
Rahul Kumar
Moh HamadaMoh Hamada
Hi Mallikarjuna, 

I got this problem myself yesterday, und just figured out a solution, as following:

In JavaScript Controller
component.set("v.listOfItems", rtnValue); // rtnValue is your lis, which you got from somewhere

In your .cmp
<aura:attribute name="listOfItems" type="Object[]" /> 
<aura:attribute name="value" type="List" default="{!v.listOfItems}"/> 

<lightning:checkboxGroup aura:id="mygroup"         
name="checkboxGroup"         
label="Some Label:"         
options="{!v.listOfItems}"         
value="{!v.value }"         
onblur="{!c.handleChange}"/>


In the attribute name you set the default from the same list you got in js

NOTE !! its's very important that the listOfItems has the same values as those you use in options in checkboxGroup,
else it just won't work!!


In checkboxGroup the attribute value has a feld of values which will be checked as a default!

For more Info: 
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_checkboxGroup.htm

 
David Roberts 4David Roberts 4
Here's how I checked all the buttons in the checkboxGroup:
I created an attribute:
<aura:attribute name="isAllTeamsSelected" type="Boolean" default="false"/>
and a method:
 
handleSelectAllTeams: function (component) {
        if(component.get('v.isAllTeamsSelected') == false) {
          component.set('v.isAllTeamsSelected', true);
        }
        var allteams = component.get('v.TeamOptions');
        var seltdteams = [];
        allteams.forEach(function(element) {
            seltdteams.push(element.value);
        });
        component.set('v.selectedTeams',seltdteams);
        
    },//handleSelectAllTeams

I also struggled to set the options in apex but finally cracked it by converting the JSon strings to javascript objects:
 
useapex: function(component, event, helper) {
        var action = component.get('c.getOptionsViaApex');
        var alloptions= [];
            action.setCallback(this, $A.getCallback(function (response) {
                var state = response.getState();
                if (state === "SUCCESS") {
                    alloptions= response.getReturnValue();
                    var anOption;
                    var newvalues = [];
                    for (var i in alloptions) {
                         
                          
                        anOption= alloptions[i];
                        var obj = JSON.parse(anOption);
                        newvalues.push(obj);
                         
                     }
                    component.set('v.Options',newvalues);
                    
                 
                } else if (state === "ERROR") {
                    helper.onError(component, helper, response, reject);
                }
            }));

            $A.enqueueAction(action);
    },

Here's how your apex method might look. I'm getting a list of all the teams (collaboration groups). Note I've added a "select all" option.
@AuraEnabled
    public static List<String> getOptionsViaApex() {
        List<String> options = new List<String>();
        String str1;
        
        str1 = '{\"label\": \"Select All Teams\", \"value\": \"All\"}';
        options.add(str1);
        
        List<CollaborationGroup> lstGroupNames = [SELECT Name FROM CollaborationGroup];
        if (lstGroupNames.size()>0){
            for (CollaborationGroup cg : lstGroupNames) {
                str1 = '{\"label\": \"' + cg.Name + '", \"value\": \"'+ cg.Name + '\"}';
                options.add(str1);
            }//next cg
        }//endif lstGroupNames has entries
        
        return options;
 
        
    }//getOptionsViaApex

using controller methods:
handleChangeTeamSelection : function(component, event, helper) {
        var thechecked = component.get("v.selectedTeams");
        for (var i=0; i<thechecked.length; i++){
            console.log(thechecked[i]);
        }
        var changedValue = event.getParam("value");
        if (changedValue == 'All' ) {
            helper.handleSelectAllTeams(component, event, helper);
        }
        
    },//handleChangeTeamSelection

    handleSelectAllTeams: function (component,helper) {
        if(component.get('v.isAllTeamsSelected') == false) {
          component.set('v.isAllTeamsSelected', true);
        }
        var allteams = component.get('v.TeamOptions');
        var seltdteams = [];
        allteams.forEach(function(element) {
            seltdteams.push(element.value);
        });
        component.set('v.selectedTeams',seltdteams);
        
    },//handleSelectAllTeams

Sorry this is two years later but hope it helps someone. Please mark as best answer.