Quiero cambiar el valor de mis casillas de verificación de verdadero a falso
var x = document.getElementsByClassName("checkbox") for(let i=0; i<=x.length; i++) { x[i].checked = false; } pero cuando trato de hacer esto, aparece un error: Cannot set properties of undefined (setting 'checked') porque x es HTMLCollection y x[i] solo devuelve
<input type="checkbox" class="checkbox"> por lo que no hay propiedad 'marcada'.
¿Cómo puedo manejar esto?
Cambie el <= a < en el ciclo for
for(let i=0; i<x.length; i++) {}O haz que se repita hasta la longitud - 1
for(let i=0; i<=x.length - 1; i++) {}El problema de cómo lo estás haciendo es que no estás haciendo uso de los estados en React.
Así es como lo haría.
Establecer el estado inicial de las casillas de verificación:
constructor(props) { super(props); this.state = {checked : false}; }luego pase el estado a la propiedad marcada de la entrada:
<input type="checkbox" checked={this.state.checked} onChange={(e) => this.handleChange(e)} />En la función handleChange actualice el estado de la casilla de verificación:
handleChange = (e) => { this.setState({ checked: e.target.checked }) } Esto debería actualizar todas las casillas de verificación que han checked={this.state.checked}
Prueba esto:
<input type="checkbox" checked={this.state.chkbox} onChange={this.handleChangeChk} />O puede consultar esta pregunta aquí explicada brevemente:
Establecer el valor de la casilla de verificación en React JS