Si un checkbox está seleccionado con jQuery

En este tutorial aprenderemos cómo podemos acceder a un elemento checkbox y saber si está seleccionado o no.

Método prop()

Podemos acceder a la propiedad checked mediante el método prop() y ver si su estado es true o false, es decir, si está seleccionado o no.

Ejemplo

<!--Tenemos varios elementos input tipo checkbox. El primero seleccionado-->
<p>Aficciones</p>
<input type="checkbox" id="deportes" name="deportes" value="Deportes" checked> Deportes<br>
<input type="checkbox" id="musica" name="musica" value="Música"> Música<br>
<input type="checkbox" id="cine" name="cine" value="Cine"> Cine
<script>
  //Accedemos a la propiedad checked del primer input
  if($("#deportes").prop('checked')) {
    alert("Checkbox Deportes seleccionado");
  }
</script>

Obtener cuál está seleccionado

Otra opción sería recorrer todos los inputs de tipo checkbox y obtener cual está seleccionado

<p>Aficciones</p>
<input type="checkbox" name="deportes" value="Deportes" checked> Deportes<br>
<input type="checkbox" name="musica" value="Música"> Música<br>
<input type="checkbox" name="cine" value="Cine"> Cine
<script>
  //Al cargar la página
  $(document).ready(function() {
    //Recorre todos los input
    $("input").each(function() {
      //Si está seleccionado muestra su value
      if($(this).prop('checked')) {
        alert("El input " + $(this).prop('value') + " está seleccionado");
      }
    });
  });
</script>

Método attr()

El método prop() se puede utilizar a partir de la versión 1.6 de jQuery. Si disponemos de una versión anterior debemos sustituirlo por el método attr().

La sintaxis es la misma

<script>
  if($("#deportes").attr('checked')) {
    alert("El input " + $(this).prop('value') + " está seleccionado");
  }
</script>

Si te ha gustado no olvides compartir en redes sociales.

[addthis tool=»addthis_inline_share_toolbox_6jt6″]

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo