Si un checkbox está seleccionado con jQuery

Si un checkbox está seleccionado con jQuery


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.

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

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Una idea sobre “Si un checkbox está seleccionado con jQuery”

Translate »
Ir a la barra de herramientas