0

How to clear the Lightning checkbox group? I tried to clear it using the empty array. But the value gets set to the attribute however, on the UI the checkbox is still checked.

Option 1 -

component.set("v.checkValue",['']);  

Option 2 -

var arr= [] ;
component.set('v.checkValue',arr);  

Both of these are not unchecking the checkbox in the UI.

1

The second method is correct. I have verified this with a MVR:

<aura:application extends="force:slds">
    <aura:attribute name="options" type="List" />
    <aura:attribute name="value" type="List" />

    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    <lightning:checkboxGroup label="Test" name="test" options="{!v.options}" value="{!v.value}" />

    <lightning:button label="Reset" onclick="{!c.reset}" name="reset" />
</aura:application>

({
    init: function(component, event, helper) {
        component.set("v.options", [
            { label: "Hello", value: "Hello" },
            { label: "World", value: "World" }
        ]);
    },
    reset: function(component, event, helper) {
        component.set("v.value", []);
    }
})

It's entirely possible that you have a typo or some other glitch in your code, or you're trying to set the values outside of the Aura Life Cycle. When using callbacks, make sure you use $A.getCallback or the aura:valueChange handlers may not fire.

  • Tried , it was working till last week. After the upgrade it has stopped working. – SalesforceDev May 8 '18 at 13:09
  • @SalesforceDev Do you get any console errors? Like I said, the code above worked for me when I posted this answer. I can try checking in a Summer 18 org, though. – sfdcfox May 8 '18 at 13:49
  • No Console errors. @sfdcfox – SalesforceDev May 9 '18 at 13:51
0

I'm having problems using an apex class to populate the options.

Works fine in java but labels are missing using apex.

<lightning:button label="Java get Options" onclick="{!c.usejava}" name="usejava" />
            <lightning:button label="Apex get Options" onclick="{!c.useapex}" name="useapex" />

controller is:

usejava: function(component, event, helper) {
    component.set("v.TeamOptions", [
        { label: "Hello", value: "Hello" },
        { label: "World", value: "World" }
    ]);
},

useapex: function(component, event, helper) {
    var action = component.get('c.getTeamOptionsViaApex');
        action.setCallback(this, $A.getCallback(function (response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                console.log("TeamOptions="+response.getReturnValue());
                component.set("v.TeamOptions",response.getReturnValue());                  
            } else if (state === "ERROR") {
                helper.onError(component, helper, response, reject);
            }
        }));

        $A.enqueueAction(action);
},

and the apex is

@AuraEnabled
public static List<String> getTeamOptionsViaApex() {
    List<String> options = new List<String>();

    String str1 = '{\'label\': \'This\', \'value\': \'this\'}';
    options.add(str1);
    str1 = '{\'label\': \'Is\', \'value\': \'is\'}';
    options.add(str1);
    str1 = '{\'label\': \'Apex\', \'value\': \'apex\'}';
    options.add(str1);


    return options;
}//getTeamOptions

the returned value is:

TeamOptions={'label': 'This', 'value': 'this'},{'label': 'Is', 'value': 'is'},{'label': 'Apex', 'value': 'apex'}

which (I think) looks valid and I get a change from two to three checkboxes but no labels.

[Edit/Update] I found the solution: In the success branch I had to convert each JSon string to an object.

var allteams = [];
                allteams = response.getReturnValue();
                //console.log('allteams = ' + allteams);   
                var ateam;
                var newvalues = [];
                for (var i in allteams) {

                    ateam = allteams[i];
                    var obj = JSON.parse(ateam);
                    newvalues.push(obj);

                 }
                component.set('v.TeamOptions',newvalues);

I also altered the format of the JSon strings in the apex to:

@AuraEnabled
public static List<String> getTeamOptionsViaApex() {
List<String> options = new List<String>();

String str1 = '{"label": "This", "value": "this"}';
options.add(str1);
str1 = '{"label": "Is", "value": "is"}';
options.add(str1);
str1 = '{"label": "Apex", "value": "apex"}';
options.add(str1);

return options;
}//getTeamOptionsViaApex
  • Also tried a different format – Dave Roberts Sep 5 at 10:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.