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">
...
Improve this question
3
  • Where's the action?
    – sfdcfox ♦
    Commented Jul 13, 2017 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
    Commented Jul 13, 2017 at 16:50
  • The action doesn't matter, but how you're calling it might. It could be a simple mistake somewhere.
    – sfdcfox ♦
    Commented Jul 13, 2017 at 16:54

1 Answer 1

Reset to default
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>
Improve this answer
3
  • 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
    Commented Jul 14, 2017 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 ♦
    Commented Jul 14, 2017 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
    Commented Jul 14, 2017 at 12:37

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .