1

My requirement is to check/uncheck a inputcheckbox as and when i press a button. it works fine for the first time. however, after that no matter how many times i click the button, the checkbox doesnt gets checked/unchecked.

I have used an boolean attribute and i set the value of the checkbox with that attribute on click of a button.

here is my component:

<aura:component >
  <aura:attribute name="checkThis" type = "Boolean" default ="true" />
  <ui:button label="press me" press="{!c.changeCheckBox}" />
  <ui:inputcheckbox label="checkBox" value="{!v.checkThis}" />
</aura:component>

here is my controller

({
changeCheckBox : function(component, event, helper) {
    var getAttributeValue = component.get("v.checkThis");
    if(getAttributeValue=="true"){
        component.set("v.checkThis","false");
    }
    else{
        component.set("v.checkThis","true");
    }
}
})
1
  • Try setting the default value to "false" and see if that doesn't solve your problem.
    – crmprogdev
    Feb 25, 2016 at 17:09

3 Answers 3

4

Since you've specified the data type as Boolean, I'm pretty sure you need to use native Boolean values. Try this version:

({
    changeCheckBox : function(component, event, helper) {
        component.set("v.checkThis", !component.get("v.checkThis"));
    }
})
2

Sticking the following JavaScript alert in your controller after you set getAttributeValue, you will find that it returns false:

alert(getAttributeValue=="true"); // false

This is because you've declared your checkThis attribute as a Boolean type, not a String type. A JavaScript boolean represents two values: true or false. A string stores a sequence of characters, like "blue" or "768 Main Street" or "false". A boolean false is not the same as a sequence of characters that make up the word "false":

"false" == false // false
"false" == true  // also false

Since checkThis is a Boolean, you want to compare it to a Boolean value. So taking out all the quotes around all of your true/false values (changing them from string values to boolean values) fixes it:

({
changeCheckBox : function(component, event, helper) {
    var getAttributeValue = component.get("v.checkThis");
    if(getAttributeValue==true){
        component.set("v.checkThis", false);
    }
    else{
        component.set("v.checkThis", true);
    }
}
})
2
  • Thanks Bro! This fixed the code. however, i still couldnt understand why its not working with the quotes? Can you elaborate on this please? what difference does it make if i include or exclude quotes?
    – vishal
    Feb 26, 2016 at 11:24
  • I updated to hopefully make it clearer. Let me know if it's still confusing. Feb 26, 2016 at 14:27
0

I have never done this in javascript, but I have in a apex controller so the logic should be translatable, and this is what I do for my controllers re rendering of check boxes

({
changeCheckBox : function(component, event, helper) {
var getAttributeValue = component.get("v.checkThis");
if(getAttributeValue == "false"){
    component.set("v.checkThis","true");
}
else{
    component.set("v.checkThis","false");
    }
}
})

You must log in to answer this question.

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