Javascript Logo
en español

Cómo seleccionar un checkbox con Javascript

Fácil
-
1 min. lectura

En muchas ocasiones necesitamos marcar un checkbox mediante código javascript. El típico caso de uso puede ser el botón que nos permite seleccionar todos los elementos de una lista.

<div>
    <input type="checkbox" name="frutas" value="manzanas">Manzanas</input>
    <input type="checkbox" name="frutas" value="Peras">Peras</input>
    <input type="checkbox" name="frutas" value="Sandía">Sandía</input>

    <input type="button" onclick="selectAll()" value="Seleccionar todos"/>
    <input type="button" onclick="deselectAll()" value="Deseleccionar todos"/>
</div>
function selectAll(){
  const all = document.getElementsByName("frutas")
  all.forEach(item => item.checked = true)
}
function deselectAll(){
  const all = document.getElementsByName("frutas")
  all.forEach(item => item.checked = false)
}

En este caso usamos la API DOM de Javascript para seleccionar todos los elementos cuyo nombre sea frutas con getElementsByName que nos devolverá un array con todos los elementos.

Recorremos dicho array con forEach cambiando el atributo checked para marcarlos como seleccionados o deseleccionado