Checkbox como Radio Button con jQuery

agosto 27, 2011

El siguiente es un pegueño código que inventé para solucionar un problema que tuve, y fue como hacer que los checkbox se comporten como radio buttons. Seguramente usted se preguntará ¿porqué necesitaría hacer checkbox como radio si para eso es que existen los radio buttons? bueno, la respuesta simplemente es porque en el formulario se veían feos los radio buttons  (redondos) donde todas las demás opciones disponibles eran con checkbox (cuadrados).

Aquí dejo el pedazo de código:

EL HTML

<input type="checkbox" name="comoradio" value="Item 1">Item 1<br />
<input type="checkbox" name="comoradio" value="Item 2">Item 2<br />
<input type="checkbox" name="comoradio" value="Item 3">Item 3<br />
<input type="checkbox" name="comoradio" value="Item 4">Item 4<br />

Su jQuery

$("input[type=checkbox]").click(function() {
checkclic = $(this);
categoria = $(this).attr("name");
if (categoria == "comoradio") {
total = $("input[type=checkbox][name='comoradio']");
i = 1;
total.each(function(){
actual = $(this);
es = $(this).is(":checked");
if (es == true) {
i++;
if (i > 1) {
$(this).attr('checked', false);
$(checkclic).attr('checked', true);
}
}
});
}
});

La Explicación

En el HTML lo que se debe considerar es que el atributo “name” de los input que queramos que funcionen como radio sea el mismo, en éste caso es “comoradio”. Ahora, en el js es donde entra la magia para hacer que cuando se haga clic en un elemento input, del tipo checkbox se realice tal acción, en éste caso, comprobar que si el elemento actual no está checado lo chequee y le quite el check al input previamente seleccionado, ¿ se entendió? … ojalá que sí, pues creo no expliqué muy bien.

Luego de la magnifica explicación, ya podemos tener funcionando nuestros checkboxes como radio buttons.

Seguramente ésto se puede hacer con un código mucho más corto, simple, bonito, etc, etc., pero de momento es lo que me salió y funcionó.

Saludos!! PM.

  • juan valentin alducn vazquez

    AYUDA que librerias se descargan

    • estimado juan, debes descargar jquery desde jquery.com y luego de cargarla ya podrás usar este codigo.

      si necesitas más ayuda, solo comenta 😉

  • Sería bueno que publicaran un demo de sus scripts más interesantes.

    • Franklin, la verdad es que tenemos montones de ideas, pero ahora el tiempo es el que apremia y no da para publicar constantemente. Intentaré con todas mis ganas tener un tiempo para crear más scripts, pero de momento está dificil, sin embargo nunca es mala una ayudita de quien quiera compartir aquí sus conocimientos 😉
      Saludos!