Tengo las siguientes 3 casillas de verificación de entrada, después de marcar las casillas de verificación, me gustaría borrar todos los elementos marcados después de hacer clic en el botón "Borrar casilla de verificación". Intenté lo siguiente pero no funciona.
Ejemplo de trabajo de Stackblitz
aplicación.componente.html
<ul *ngFor="let d of data"> <li> <input id="checkbox" type="checkbox" class="checkbox" /> {{ d }} </li> </ul> <button (click)="myFunction()">Clear Checkbox</button>aplicación.componente.ts
export class AppComponent { data = ['tea', 'coffe', 'soda']; public myFunction() { (<HTMLInputElement>document.getElementById('checkbox')).checked === false; } }Puede usar document.querySelectorAll() para desmarcar todas las casillas de verificación.
Ejemplo de trabajo de StakBlitz
En myFunction , su código debe ser el siguiente:
document.querySelectorAll('.checkbox').forEach(_checkbox=>{ (<HTMLInputElement>_checkbox).checked = false; }); ¡Además, asegúrese de que está asignando un valor false (=) y no verificando (===)!
Lo haría de forma angular y usaría ViewChildren en su lugar. Así que adjunte una referencia a sus casillas de verificación y acceda a ellas con ViewChildren , ya que este sería un caso perfecto para eso. Así que chkboxes a la entrada
<input #chkboxes id="checkbox" type="checkbox" class="checkbox" />Defino la lista de consultas:
@ViewChildren('chkboxes') chkboxes: QueryList<ElementRef>;y para desmarcar hago un bucle en los elementos y los configuro en falso:
myFunction() { this.chkboxes.forEach(x => x.nativeElement.checked = false) }