1

I have a lwc checkbox group. I have a cancel button where I need to uncheck all the checkboxes. The checkbox group shows data correctly but my code is not working and nothing happens when I click the cancel button

  <div class="slds-popover__body slds-popover__body_small" id="dialog-body-id-26">
                   <fieldset class="slds-form-element">
                  <lightning-checkbox-group  data-id ="mycheckbox" name="Checkbox Group"
                options={divisionFilterOptions}
                     value={value}
                  onchange={handleCheckboxChange}>
             </lightning-checkbox-group>
          </fieldset>
          </div>
  <footer class="slds-popover__footer slds-popover__footer_form">
          <lightning-button label="Cancel" title="Cancel"
      onclick={handleCancelClick} class="slds-m-left_x-small"></lightning-button>
       <lightning-button variant="brand" label="Done" title="Done"
           onclick={handleDoneClick} class="slds-m-left_x-small"></lightning-button>
                  </footer>

JS

    @api divisionFilterOptions;

  handleCheckboxChange(event){
        let selectItemTemp = event.detail.value;
       console.log(event.detail.value);
            }
        });

    }

  handleCancelClick(event){
// below code not working and nothing happens
  this.template.querySelectorAll('lightning-checkbox-group').forEach(d =>d.checked = false);

    }

handleDoneClick(event0{

}

in the handleCancelClick I had also tried this.divisionFilterOptions = [ ] but that makes the entire checkbox group disappear and does not simply uncheck the checkboxes

1
  • Have you tried this? handleCancelClick(event){ this.value = []; } Aug 11, 2023 at 10:58

1 Answer 1

1

Your check box group value set using the value attribute. You need to blank when clicking on the cancel button.

Here is an example:

HTML:

<template>
    <lightning-checkbox-group name="Checkbox Group"
                              label="Checkbox Group"
                              options={options}
                              value={value}
                              onchange={handleChange}></lightning-checkbox-group>
    <p>Selected Values are: {selectedValues}</p>
    <lightning-button label="Cancel" title="Cancel"
      onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
</template>

JS:

import { LightningElement } from 'lwc';

export default class CheckboxGroupBasic extends LightningElement {
    value = ['option1'];

    get options() {
        return [
            { label: 'Ross', value: 'option1' },
            { label: 'Rachel', value: 'option2' },
        ];
    } 


    get selectedValues() {
        return this.value.join(',');
    }

    handleChange(e) {
        this.value = e.detail.value;
    }

    handleClick(e){
        this.value = [];
    }
}
2
  • Resolved. Thanks ! Aug 11, 2023 at 11:26
  • I am glad to hear that☺️. Aug 11, 2023 at 11:28

You must log in to answer this question.

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