0

HTML :

<template><div class="slds-grid slds-wrap">
          <template if:true={checkboxList}>
            <template for:each={checkboxList} for:item="m">
              <div key={m.id} class="divstyle slds-size_1-of-2" onclick={handleDivClick}>
                <Table aria-label="Utility" aria-describedby="Utility_Checkbox_desc"><th></th>
                  <tr> <td style="width: 620px; height: 40px; padding-right:100px;"><span id="otherlabel" class="slds-form-element__label labelStyle">{m.label}</span></td>
                    <td style="width: 60px;height: 40px; padding-bottom: 15px;">
                        <lightning-input style="width: 20px; height: 20px;" data-id="checkbox" type="checkbox" label="Red" variant="label-hidden" aria-labelledby="otherlabel" value={m.id} onchange={handleCheckboxChange} checked={m.checked}> </lightning-input>
                    </td>
                  </tr>
                </Table>
              </div>
            </template>
          </template>  
        </div>  
JS:
handleCheckboxChange(event) {
         const id = event.target.value;


//update this code
    let checkbox;
    checkbox = this.template.querySelector('input[type="checkbox"]');
    if (event.target.tagName === 'INPUT') {
        checked = event.target.checked;
      } // till here
        const checkbox = this.checkboxList.find(item => item.id === id);
        checkbox.checked = checked;
        if (!checked) {
            this.subList.push(id);
        } else {    
            this.subList = this.subList.filter(item => item !== id);
        }
        this.updateSelectAll();
    }
       wiredCheckboxList() {
        return new Promise((resolve, reject) => {
            getList({ accId: this.accId })
                .then((result) => {
                    const checkboxList = result
                    ? Object.entries(result).map(([id, name]) => ({
                        id,
                        label: name,
                        checked: true
                        }))
                    : [];
                    resolve(checkboxList);
                })
                .catch((error) => {
                    reject(error); this.modalContainerDiv=false;
                });
        });
    }
        handleDivClick(event) {
            if (event.target.tagName === 'INPUT') {
              return;
            }
        
            var divId = event.target.id;
             const checkbox = this.template.querySelector('input[type="checkbox"]');   
            checkbox.dispatchEvent(new Event('change'));
    }

I am trying to achieve when i click inside div I want the checkbox to be checked and that should trigger onchange event. but checkbox.dispatchEvent(new Event('change')); is not working. and i get Uncaught TypeError: Cannot read properties of null (reading 'dispatchEvent') update: i have removed handleDivClick() and replaced with handleCheckboxChange() in HTML but it is not working

3
  • Why are you trying to fire the event on the checkbox itself?
    – Nick C
    Commented Mar 17, 2023 at 4:40
  • @NickCook I did not understand? you mean to trigger the even ton check box? I already have onchange event checkbox
    – Neophyte
    Commented Mar 17, 2023 at 4:44
  • i removed handleDivClick and used this onclick={handleCheckboxChange} but I still get an error Uncaught TypeError: Cannot set properties of undefined (setting 'checked')
    – Neophyte
    Commented Mar 17, 2023 at 4:55

2 Answers 2

2

Why you are not trying to update the checkbox value using - checkbox.checked = true; instead of firing the dispatch event.

I think you want to change the checkbox value on clicking the div element, in that case, you need to get the checkbox specifically and you are not doing that.

<div key={m.id} class="divstyle slds-size_1-of-2" onclick={handleDivClick}>
.
.
.
<lightning-input style="width: 20px; height: 20px;" data-id={m.id} type="checkbox" label="Red" variant="label-hidden" aria-labelledby="otherlabel" value={m.id} onchange={handleCheckboxChange} checked={m.checked}> </lightning-input>

I have changed the data-id attribute in the input tag.

handleDivClick(event) {
            if (event.target.tagName === 'INPUT') {
              return;
            }
        
            let divId = event.target.id;
            let checkbox = this.template.querySelector(`[data-id="${divId}"]`);
            checkbox.checked = true;
}

In this way, only that checkbox will be checked which is the child of the clicked div.

1
  • I tried this, but it did not work, this line ' checkbox.checked = true;' giving this error 'Cannot set properties of null (setting 'checked')'
    – Neophyte
    Commented Mar 17, 2023 at 15:56
0
handleDivClick(event) {
    const checkbox = event.currentTarget.querySelector('lightning-input');
    checkbox.checked = !checkbox.checked;
    const changeEvent = new CustomEvent('change');
    checkbox.dispatchEvent(changeEvent);
  } 
this solution worked for me

You must log in to answer this question.

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