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.

¿Cómo saber si un checkbox está seleccionado en 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');
  }
}

¿Cómo saber si un checkbox está seleccionado en jQuery?

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

Con .prop() y .attr() se puede recuperar el valor de una propiedad de un elemento, por lo tanto simplemente necesitamos comprobar el valor de la propiedad checked (true => seleccionado / false => deseleccionado).

Otra opción es usar la función .is(selector) que comprueba si un elemento «encaja» con el selector indicado, (ej. $('input[type=checkbox]').is('input') => true y $('input[type=checkbox]').is('li') => false), usando el pseudo clase :checked se puede hacer la comprobación de si esta seleccionado o no.

Método prop() para revisar si el check esta seleccionado

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

Otro método que podemos utilizar para revisar si el check esta seleccionado es el attr()

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

Otra función que podemos utilizar para revisar si el check esta seleccionado es el attr()

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.

¿Cómo saber el valor de un checkbox con jQuery?

Ahora vamos a ver cómo obtener el valor de un checkbox con jQuery de una manera muy sencilla y práctica, supongamos que tenempos el siguiente checkbox.

<input type="checkbox" name="colorfavoritoEstradaWebGroup" value="verde" id="EstradaWebGroup">

A continuación, se muestra el ejemplo para obtener el valor de un checkbox con jQuery y lo muestra en un alert.

$(document).ready(function()
{
	$("#boton").click(function () {	 
		alert($('input:checkbox[name=colorfavoritoEstradaWebGroup]:checked').val());
	});
});