Obtener el valor de un checkbox con jQuery

Vamos a ver cómo obtener el valor de un checkbox con jQuery de una manera sencilla y práctica.

Otros post con temática similar son:

• Obtener el valor de un select (option) con jQuery
• Obtener el valor de un radio button con jQuery

Sintaxis HTML de un checkbox

<input type="checkbox" name="colorfavorito" value="rojo" id="rojo">

Tal y como vemos en el código superior el input checkbox se compone de:

1. type: Tipo de elemento input del formulario.
2. name: Nombre del input.
3. id: Identificador único del input.
4. value: Valor que tiene el elemento.

Puede haber tantos checkbox como necesitemos en un mismo formulario.

Ejemplo para obtener el valor de un checkbox con jQuery val()

Vamos a ver en este ejemplo como obtener el valor del checkbox:

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

Os explico el código:

• Se detecta el click en el botón de envío del formulario con id = ‘boton’.
• Mostramos con un alert el valor del checkbox con name = ‘colorfavorito’, el valor lo conseguimos con la función de jQuery val(). Tiene que estar marcado el checkbox.
• Enviamos el formulario.

Cómo resetear un checkbox con jQuery

Para finalizar os pongo el código para resetear el radio button, solo os queda asociarlo al click de un button como en las anteriores demos:

$('input:checkbox[name=colorfavorito]').attr('checked',false);

Evitar conflictos con otras librerías

En caso de trabajar con otras librerías distintas a jQuery os recomiendo en caso de problemas usar jQuery noConflict().

Selectores de jQuery

Para la detección, control o selección de elementos con jQuery os recomiendo leer este post:

• jQuery selectors: Cómo seleccionar o controlar elementos del DOM