Cómo comprobar si un checkbox está seleccionado con jQuery y Javascript

Cuando tenemos un checkbox en nuestra página web es muy fácil comprobar si este esta seleccionado o no. Podemos comprobar si el checkbox está seleccionado con puro Javascript o con la ayuda de jQuery. Con las dos opciones lo que hacemos es comprobar si el atributo o la propiedad checked esta presente en el contol checkbox.


Javascript

Con Javascript podemos validar si nuestro checkbox esta seleccionado con la siguiente instrucción:

if (document.getElementById('checkbox1').checked)
{
alert('checkbox1 esta seleccionado');
}

Y si quieres detectar su estado cada vez que el usuario da clic sobre el checkbox, lo puedes hacer de la siguiente manera.

var checkbox = document.getElementById('checkbox1');
checkbox.addEventListener("change", validaCheckbox, false);
function validaCheckbox()
{
  var checked = checkbox.checked;
  if(checked){
    alert('checkbox1 esta seleccionado');
  }
}

jQuery

Con el método .prop() podemos obtener el valor de la propiedad checked, que recordemos es un valor lógico (true/false).

if( $('#checkbox1').prop('checked') ) {
    alert('checkbox1 esta Seleccionado');
}

Otro método que podemos utilizar es el attr()

if( $('#checkbox1').attr('checked') ) {
    alert('checkbox1 esta Seleccionado');
}

El método .is(selector) permite comprobar si un elemento cumple con el selector especificado. Utilizándolo con el pseudo selector :checked podremos comprobar si el checkbox se encuentra seleccionado.

if( $('#checkbox1').is(':checked') ) {
    alert('checkbox1 esta Seleccionado');
}

 

Para qué sirve el método prop() de jQuery

El método prop() se agrego en jQuery 1.6, las versiones anteriores contaban con el método attr() para realizar la misma funcionalidad.

El método prop() nos sirve para poder modificar las propiedades nativas de Javascript de los elementos de una página. Como otros métodos de jQuery el uso es ligeramente distinto dependiendo del juego de parámetros que le enviemos.

En el siguiente ejemplo obtendremos el valor de la propiedad que queremos consultar. Por ejemplo para obtener el valor de un checkbox true/false

$('#checkbox1').prop("checked"); 

Lo anterior nos devolverá el valor de la propiedad checked. Para modificar el valor del checkbox utilizaremos el siguiente ejemplo.

$('#checkbox1').prop("checked", true);
$('#checkbox1').prop("checked", false);

Espero este ejemplo te ayude a manejar el método prop() y en que momento utilizarlo.

Artículos relacionados
¿Para qué sirve el método addEventListener de Javascript?
¿Para qué sirve el método addEventListener de Javascript?

El método addEventListener() nos sirve

Todo lo que necesitas saber sobre JavaScript y SEO para ser el número uno en Google
Todo lo que necesitas saber sobre JavaScript y SEO para ser el número uno en Google

Si ha utilizado JavaScript para su sitio web,

Sistema de Inventarios con ASPNET MVC Parte 8 utilizando bootstrap modal
Sistema de Inventarios con ASPNET MVC Parte 8 utilizando bootstrap modal

Continuando con el sistema de inventarios que

0 Comentarios
Enviame un comentario