Frontend: get parent element of LWC component checkbox

apexjavascriptjslightning-web-components

I am quite new to SF development and as a frontend developer I am experiencing some striggles while taking over a project from a colleague who has just left his job. So please appologize any "stupid" beginner questions…

We are currently developing an APEX class and I need to access the parent container of a LWC component.

Let my element be like this:

<template for:each={objInfo.todoList} for:item='todoListItem' class="slds-p-top_medium">
    <lightning-input 
        key={todoListItem.fieldName} 
        name={todoListItem.fieldName} 
        label={todoListItem.fieldLabel} 
        type={todoListItem.fieldType} 
        value={todoListItem.value} 
        disabled={todoListItem.disabledRes}
        checked={todoListItem.value} >
     </lightning-input>
 </template>

Rendered output then is:

<lightning-input c-todolist_todolist="" class="slds-form-element" lightning-input_input-host="">
    <span lightning-input_input="" data-aria="" class="slds-assistive-text"></span>
    <div lightning-input_input="" class="slds-form-element__control slds-grow">
        <span lightning-input_input="" class="slds-checkbox">
            <input lightning-input_input="" type="checkbox" id="checkbox-10" name="Window Cleaning" value="">
            <label lightning-input_input="" for="checkbox-10" class="slds-checkbox__label">
                <span lightning-input_input="" class="slds-checkbox_faux"></span>
                <span lightning-input_input="" class="slds-form-element__label">Window Cleaning</span>
             </label>
         </span>
     </div>
 </lightning-input>

Now I need to access the containing lightning-input element (which has the class ".slds-form-element") of each checkbox that is currently checked.

I was trying to reach this as follows:

for (let i = 0; i < this.objInfo.todoList.length; i++) {
        if(this.objInfo.todoList[i].value==true) {
            this.objInfo.todoList[i].closest('.slds-form-element').style.backgroundColor = 'green';                
        }
    }

But the response is
Uncaught (in promise) TypeError: this.objInfo.todoList[e].closest is not a function

What am I doing wrong here?

console.log("Checked: " + this.objInfo.todoList[i].fieldName);

did work, but

this.objInfo.todoList[i].closest('.slds-form-element').style.backgroundColor = 'green';

does not.

Best Answer

EDIT

You can use a regular input, as it turns out:

<template for:each={objInfo.todoList} for:item='todoListItem' >
  <lightning-input 
      key={todoListItem.fieldName} 
      name={todoListItem.fieldName} 
      label={todoListItem.fieldLabel} 
      type={todoListItem.fieldType} 
      value={todoListItem.value} 
      disabled={todoListItem.disabledRes}
      checked={todoListItem.value} >
  </lightning-input>
</template>

Then in your css file (name syntax if it does not exist is: componentName.css):

:host {
--slds-c-checkbox-color-background-checked : green;
}

That's it!

Related Topic