0

I am trying to use a lightning-input checkbox to check/uncheck all the options on a lightning-checkbox-group but the querySelector keeps returning no values. This is the HTML:

<lightning-input type="checkbox" label="Select all" onchange={checkAllCheckboxes}></lightning-input>
                                <lightning-checkbox-group name="Checkbox Group"
                                        data-id="myChk"
                                        label="Select which schools to roll down"
                                        options={options}
                                        value={selectedValue}
                                        onchange={handleChange}>
                                </lightning-checkbox-group>

And this is the JS

checkAllCheckboxes(event){
        
        var checkboxGroup = this.template.querySelector('lightning-checkbox-group');
        var checkboxes = checkboxGroup.querySelectorAll('input');
        //var checkboxes = checkboxGroup.querySelectorAll('.slds-checkbox');
        console.log('checkboxes size:'+checkboxes.length);
        for (let ch of checkboxes){
            if (ch.type == 'checkbox'){
                console.log('type is checkbox');
                ch.checked = event.detail.checked;
            }
        }
    }

1 Answer 1

1

You can't access the internal components of a component, because of the Shadow DOM.

Instead, just set the value of the checkbox group to the desired values, specified as an Array of values.

this.selectedValue = this.options.map(
  (option) => option.value
);

To uncheck all the boxes, use an empty array.

this.selectedValue = [];

You must log in to answer this question.

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