We have two tabs called X and Y. When we are on Tab Y, we use a checkbox called 'Advanced Filters'.When checked it shows a lightning layout with four inputs.After filling the inputs , if i switch to another tab X and then return back to Tab Y,the layout disappears(rightly so) but the checkbox remains checked.I want to uncheck it too when the tab is switched. This is what i a trying to do.Any response is very much appreciated.

handleTabSwitch(event) {
        this.retrievalMode = event.target.value;
        this.showBookingFiltersTab = false;
        this.showBookingReferenceInput = true;
        // this.checkboxVal = false;

        let advanceFilterCheckbox =this.template.querySelectorAll('[data-advance-filter = "checkbox"]');
            advanceFilterCheckbox.checked = false;

When checked it shows the lightning inputs.enter image description here

When tab is switched to flight and then to Booking, I want to uncheck the checkbox(which is not happening as shown in the screenshot). enter image description here

  • 1
    Are you able to provide more information about what's not working? Do you know how to debug your LWC? As it stands, it's hard for anyone to be able to help you without more information.
    – Nick Cook
    Feb 16 at 2:59
  • edited my question to show what i need to achieve which is not happening right now.I need to uncheck the checkbox when the tab is switched to another tab X and then again to Y. Feb 16 at 3:31
  • Do you know how to debug your LWC?
    – Nick Cook
    Feb 16 at 3:37
  • Could you also add your HTML template code? I see you are using the querySelectorAll which returns a list of checkboxes. You could iterate over the returned list and set checked=false or just use querySelector if there's only one checkbox.
    – Naga
    Feb 16 at 4:03
  • Sure, I will. I only have one Checkbox.I will use querySelector and test.Do you think the above code should work? Feb 16 at 4:16

when you query input right after you switched the tab i think the element is stil not available in dom at that time you can put a timeout and then query input inside like this

handleTabSwitch(event) {
setTimeout(()=>this.template.querySelector('[data-advance-filter = "checkbox"]').checked=false);

  • Thankyou so much it works. Feb 16 at 8:45
  • This is what i did. When the page loaded, the default tab is supposed to be flights tab and since the value of checkbox is null at that time, i had to first query the checkbox and then only set it to false if the value is not null.Do you think thats correct? Feb 16 at 8:48
  • let advanceFilterCheckbox = this.template.querySelector('[data-advance-filter = "checkbox"]'); if (advanceFilterCheckbox != null) { setTimeout(()=>this.template.querySelector('[data-advance-filter = "checkbox"]').checked=false); } Feb 16 at 8:49
  • @Pseudodarwinist yes that is correct in current scenario
    – User6670
    Feb 16 at 8:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.