Hola, estoy trabajando en una funcionalidad para la selección de casillas de verificación limitada para 4 casillas de verificación en la lista, por lo que ahora tengo un filtro de rotación de tono en el estilo para 4 casillas de verificación seleccionadas, ahora si desmarco cualquiera de las seleccionadas y verifico una selección diferente, debería ser capaz de ver el color omitido que se agregará allí.
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>
