Not able to read boolean checked from the input type="checkbox"

Question

I am using a custom styled checkbox like this, this is important for my UI, however I am not able to read the checked boolean from this, (when I explicitly assign checked=true/false,it defaults properly to the UI.I can create attributes and set them in onchange function, however is their a way to directly read the values?

                        <ul class="ks-cboxtags">

                        <li ><input type="checkbox" id="checkboxOne" value="Paid"  onchange="{!c.addStatusFilter}"  checked="false" /><label for="checkboxOne">Paid</label></li>
                        <li><input type="checkbox" id="checkboxTwo" value="Pending" onchange="{!c.addStatusFilter}"  checked="false" /><label for="checkboxTwo">Pending</label></li>
                        <li><input type="checkbox" id="checkboxThree" value="Rejected" onchange="{!c.addStatusFilter}"  checked="false" /><label for="checkboxThree">Rejected</label></li>
                        <li><input type="checkbox" id="checkboxFour" value="Denied" onchange="{!c.addStatusFilter}"  checked="false" /><label for="checkboxFour">Denied</label></li>
                    </ul>

    addStatusFilter:function(component,event,helper){
    console.log('Inside add Status Filter');
    var btnValue = event.target.getAttribute('value');
    var btnChecked = event.target.getAttribute('checked');
    var statusFilters = component.get("v.statusFilters");
    console.log('btnValue---->'+btnValue);
    console.log('done');
    console.log('btnChecked---->'+btnChecked);
    if(btnChecked  == true){
        statusFilters.push(btnValue);
    }
    else{
        for(var i=0; i<statusFilters.length; i++){ 
            if (statusFilters[i] === btnValue) {
                statusFilters.splice(i, 1); 
            }
        }
    }
    component.set("v.statusFilters",statusFilters);
    console.log(statusFilters);

    helper.applyStatusFilter(component,event,helper);
}

Answer 1

Set your boolean using event.target.checked so that you have

var btnChecked = event.target.checked

See a similar example here.