0

Hi there I'm working on a functionality for checkbox selection limited for 4 checkbox in the list , so now I have filter hue-rotate in styling for 4 selected checkbox , now if I uncheck the anyone of selected and check different selection I should be able to view the left out color to be added over there.

 handleChange(){
    let checkboxes = this.template.querySelectorAll('.vehicleCheck');
    checkboxes.forEach((checkbox) => {
        checkbox.addEventListener('click', (e) => { 
            let checked = this.template.querySelectorAll('.vehicleCheck:checked');
           if( checked[1].length==1 ){
                checked.style.cssText=" filter: hue-rotate(0deg)";
            }else if (checked[2].length==1){  
                checked.style.cssText="filter: hue-rotate(50deg);";
            }else if (checked[3].length==1) {
                checked.style.cssText="filter: hue-rotate(89deg);";
            }else if (checked[4].length==1){
                checked.style.cssText="filter: hue-rotate(180deg) brightness(1.5);";
            }else if(checked.length >= 5){
                e.preventDefault();
                e.stopPropagation();
            }
        });
    });
}





<div class="trend-vehicles-container">
            <div class="trend-vehicles">
              <template for:each={summerizedArray} for:item="Fer">
                <div class="trend-each-vehicle" key={Fer.chassisIds}>
                  <input type="checkbox" value={Fer.chassisIds} id={Fer.chassisIds} onchange={handleChange} data-id="overview" class="vehicleCheck" /> 
                  <span style="font-size: 13px;">{Fer.chassisIds}</span>
                </div>
              </template>
            </div>
          </div>

Actual output

Expected

Manjunath L
  • 3
  • 5
  • Above is the updated code – Manjunath L Jun 30 '22 at 05:56
  • what do you think `checked[1]` is? why have you skipped `checked[0]` – Bravo Jun 30 '22 at 05:57
  • Checked[0] applies the first styling to all checked – Manjunath L Jun 30 '22 at 05:58
  • what do you expect `checked[1].length` to be then? why would it be 1? what else can it be? can multiple checkboxes be checked at any one time? if so, why are you doing `else if` – Bravo Jun 30 '22 at 05:58
  • Thanks , but I'm confused. – Manjunath L Jun 30 '22 at 06:01
  • you're confused? i asked what you expect `checked[1].length` to represent ... why would a html element have a length? (checked[n] after all is the n-th element in the querySelectorAll result) – Bravo Jun 30 '22 at 06:04
  • Means in the list of n elements is dynamically rendering on screen. But on the selection, color of checkbox gets changed on selection respectively... – Manjunath L Jun 30 '22 at 06:11
  • try doing some debugging ... checked[n] is an `` element, they do not have a `.length` ... therefore none of your if/else-if that use `checked[n].length` will ever be true ... basic debugging will help here, as I can't even guess what you actually want to do – Bravo Jun 30 '22 at 06:26
  • also worth noting ... `checked` is a `Node List` - and as such has no `.style` property - only actual HTML elements have a `.style` property - but since your `if` statements are never true for the aforementioned reason, you won't have seen this error in your browser console - assuming you know what that is and have checked it for errors – Bravo Jun 30 '22 at 06:30
  • How can I change the checkbox color after checked ? - For comparison in the list of checked . – Manjunath L Jun 30 '22 at 07:03
  • again, your code is not easy to decipher - i don't know ... did you try? – Bravo Jun 30 '22 at 07:23

0 Answers0