[SalesForce] Change style on checkbox selection in Lightning

I have a Lightning component with HTML table, with one of the columns being a checkbox. I am trying to change table row style when the checkbox is selected, by using $A.util.toggleClass in the onchange event of the checkbox, but the style class does not apply to the row. Can someone help?

Edit – Including relevant code

Markup

<table class="slds-table slds-table_bordered slds-table_resizable-cols slds-table_fixed-layout slds-no-cell-focus slds-table_edit" role="grid">
    <tbody>
        <aura:iteration items="{!v.records}" var="lineItem" indexVar="i">
            <tr class="slds-hint-parent" aura:id="parentRow">
                <td class="slds-cell-edit" role="gridcell">...</td>
                <td class="slds-cell-edit" role="gridcell">
                    <span class="slds-checkbox">
                <lightning:input aura:id="select-row" type="checkbox" class="field" onchange="{!c.selectRow}" name="{!'checkbox-' + (i+1)}" tabindex="-1" variant="label-hidden" label="Select all"/> 
              </span>
                </td>
            </tr>
        </aura:iteration>
    </tbody>
</table>

Controller

selectRow : function(component, event, helper) {
    var items = component.find('select-row')
        parentRow = component.find("parentRow");
    $A.util.toggleClass(parentRow, "setSelected");
}

Style

.THIS .setSelected{
    background-color: #EEE;
}

Best Answer

You can do it by using the $A.util.addClass method. You just need to find the parent element by using the parentElement property and then apply the class using util. Here is an example -

selectRow : function(component, event, helper) {
   $A.util.addClass(event.target.parentElement.parentElement, 'setSelected');
}

It will add the class to the row of the checkbox checked.

Let me know if that serves your purpose.

Related Topic