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
0 Comentarios
Enviame un comentario