1

In order to obtain the standard styling of the Lightning Design System, I've used in one of my components the following HTML to render a simple checkbox, that can be found in the standard docs too:

<div class="slds-form-element">
 <div class="slds-form-element__control">
  <span class="slds-checkbox">
    <input type="checkbox" name="options" value="options" id="checkbox-1">
    <label class="slds-checkbox__label" for="checkbox-1">
      <span class="slds-checkbox_faux"></span>
      <span class="slds-form-element__label">Checkbox Label</span>
    </label>
  </span>

What I want to do is to be able to memorise the value of the checkbox, after each check. I've tried to attach in an onselect, onchange, and onclick event, an action from the controller, but I see that the action doesn't get called. Is there any thing that I'm missing?

EDIT: After @Sfdcfox suggestion, I am adding a simple controller that holds a simple method, which I want to bind with the onselect event of the input checkbox(preferably):

Controller.js:

{ 
   onCheck: function(cmp, evt, helper) {
      console.log("Checkbox Checked!");
   }
}

As pointed out before, I would like to use this function in the form of:

...
<input type="checkbox" name="options" value="options" onchange="{!c.onCheck}" id="checkbox-1">
...
  • Where's the action? – sfdcfox Jul 13 '17 at 16:43
  • I don't think the action matters, it could be something, that only prints smth in the console log. I just want to attach that action somehow to this standard HTML component. Still, I am editing the question, after your suggestion. – Endrit Sino Jul 13 '17 at 16:50
  • The action doesn't matter, but how you're calling it might. It could be a simple mistake somewhere. – sfdcfox Jul 13 '17 at 16:54
0

First, while XML requires closing tags, HTML does not; by placing the label in the input, you're messing things up. Instead, close the input using />. Second, you should use the "onchange" event.

The following code works in my developer org:

<aura:application extends="force:slds">
    <div class="slds-form-element">
        <div class="slds-form-element__control">
            <span class="slds-checkbox">
                <input type="checkbox" onchange="{!c.showMessage}" name="options" id="checkbox-1" value="on" />
                <label class="slds-checkbox__label" for="checkbox-1">
                    <span class="slds-checkbox_faux"></span>
                    <span class="slds-form-element__label">Checkbox Label</span>
                </label>

            </span>
        </div>
    </div>
</aura:application>
  • I was able to attach the action succesfully, but I am not able to read the value of the checkbox being checked. I try in the controller to do smth like: var selected = evt.getSource().get("v.name"); but my code doesn't get executed, and in the chrome console I don't see any warning. Is this the correct way of reading the value? According to the documentation[1] the input checkbox itself is hidden, and the checkbox experience is provided by the span with "slds-checkbox_faux". [1] lightningdesignsystem.com/components/checkbox – Endrit Sino Jul 14 '17 at 8:28
  • @EndritSino Nope, you're overthinking it. Since it's not a real component, you need to use the normal DOM properties. Try evt.target.checked instead. – sfdcfox Jul 14 '17 at 12:12
  • Thanks @sfdcfox. Similar using evt.target.name I was able to get the actual name of the checkbox, so I can distinguish them and check which checkbox was checked and which wasn't. P.S. Go ahead and modify your answer adding this knowledge too, so it's more complete. – Endrit Sino Jul 14 '17 at 12:37

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.