5

We're using the toggle checkbox button as below.

<aura:attribute name="viewAllItemsSwitch" type="String" description="View all on/off" default="off"/>
                      <div class="slds-form-element">
                    <label class="slds-checkbox_toggle slds-grid">
                      <span class="slds-form-element__label slds-m-bottom_none">View All Items</span>
                      <input aura:id="swtichAllItems" type="checkbox" label="View All Items" value="{!v.viewAllItemsSwitch}" aria-describedby="toggle-desc" name="viewAllItems"  onchange="{!c.switchSelectItemsView}" class="slds-p-around_large"/>

                      <span id="toggle-desc" class="slds-checkbox_faux_container" aria-live="assertive">
                        <span class="slds-checkbox_faux"></span>
                        <span class="slds-checkbox_on">All Items displayed</span>
                        <span class="slds-checkbox_off">Some Items displayed</span>
                      </span>
                    </label>
                  </div>

I read the value or checked status inside the input-->onchange() as below.

        var toggleButton = component.find('swtichAllItems');
        if (toggleButton!=null)
            console.log(' value: '+toggleButton.get("v.value")+' checked: '+toggleButton.get("v.checked"));

It's not captured, and console.log as below.

value: undefined checked: undefined

Is it not correct? I need to get the value or checked status of the Lightning checkbox toggle.

9

If you're using a normal input, you need to get the element and then check its checked attribute:

logChange: function(component, event, helper) {
    console.log(component.find("someAuraId").getElement().checked);
}

If you're using ui:inputCheckbox or lightning:input type="toggle", and you need to know the value, consider binding to an attribute. Here's both types together:

<aura:attribute name="box1" type="Boolean" default="true" />
<aura:attribute name="box2" type="Boolean" default="true" />

<aura:handler name="change" value="{!v.box1}" action="{!c.logChange1}" />
<aura:handler name="change" value="{!v.box2}" action="{!c.logChange2}" />

<ui:inputCheckbox value="{!v.box1}" label="The Box To Check" />
<lightning:input name="box2" type="toggle" checked="{!v.box2}" label="The Other Box To Check" />

logChange1: function(component, event, helper) {
    console.log(component.get("v.box1"));
},
logChange2: function(component, event, helper) {
    console.log(component.get("v.box2"));
},
0
5

You should use lightning:input base component

<lightning:input aura:id="inputToggle" type="toggle"
label="Toggle value" name="togglevalue"   
value="ToggleValue" onchange="{!c.handleFilesChange}" />

Controller.js

   handleFilesChange: function (cmp, event) {
      var toggleVal = cmp.find('inputToggle').get('v.value');
      var isChecked = cmp.find('inputToggle').get('v.checked');
      console.log(toggleVal);
    }
3
  • 1
    It's get('v.checked') actually. – sfdcfox Nov 20 '17 at 3:47
  • @sfdcfox that is correct v.checked will give checked status and v.value will give value. I have updated answer – Himanshu Nov 20 '17 at 4:08
  • get('v.value') does not work for me – Robs Jun 4 '19 at 11:47

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.