How do I select only one entry from a lightning:checkboxgroup, meaning, I can do an either - or, but not select two options at once? I have two checkboxes in my group, and v.value gives the order according to the options set in the options attribute, but then I cannot find out which is the latest value selected. See description of lightning:inputcheckbox:https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_checkboxGroup.htm.
2 Answers
You can use change handler to identify the changes between old and new values.
<aura:handler name="change" value="{!v.checkboxValue}" action="{!c.checkboxHandler}"/>
Bind an action "checkboxHandler" which will be triggered whenever value of checkbox will change. Please find the below example which will help you to solve your problem.
Component:-
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="options" type="List" default="[
{'label': 'Blue', 'value': 'Blue'},
{'label': 'Red', 'value': 'Red'},
{'label': 'Green', 'value': 'Green'}
]"/>
<aura:attribute name="checkboxValue" type="List"/>
<aura:handler name="change" value="{!v.checkboxValue}" action="{!c.checkboxHandler}"/>
<lightning:checkboxGroup
aura:id="mygroup"
name="checkboxGroup"
label="Checkbox Group"
options="{! v.options }"
value="{! v.checkboxValue }"
required="true" />
Controller.js
({
checkboxHandler: function (cmp, event, helper) {
var oldValue= event.getParam("oldValue");
var newValue = event.getParam("value");
console.log("old value: " + oldValue);
console.log("new value: " + newValue);
// Identify the new checkbox value
if(oldValue.length < newValue.length){
alert('new value--'+helper.getDifference(oldValue, newValue));
}
}
});
Helper.js:- A utility method is written here which compares two arrays and returns the difference
({
getDifference : function(oldValue, newValue) {
var result = [];
for (var i = 0; i < newValue.length; i++) {
if (oldValue.indexOf(newValue[i]) === -1) {
result.push(newValue[i]);
}
}
for (i = 0; i < oldValue.length; i++) {
if (newValue.indexOf(oldValue[i]) === -1) {
result.push(oldValue[i]);
}
}
return result;
}
})
I hope it helps. Please mark it as answer if it resolve your issue and can help other community members. Cheers !!!
-
Ok, thank you, that seems to be a good start. But now if I try to set the new value for the checkboxGroup, it still shows both boxes checked: Jan 21, 2018 at 17:33
-
if(oldValue.length < newValue.length){ alert('new value--'+helper.getDifference(oldValue, newValue)); cmp.set("v.checkboxValue", newValue); } Jan 21, 2018 at 17:33
-
-
1
-
1But thanks also for the hint with the old and new values, that is quite useful. Jan 21, 2018 at 18:13
If you need to be able to find out which is the latest value selected - you could keep a "backup copy" of the state whenever it's changed, so that on the next change you can compare to see what's different.
lightning:radioGroup
for that purpose?