Close

jQUERY: Recorrer checkbox y radiobutton

Unos de los elementos HTML de los cuales da mucha cuestión al momento de que empezamos a programar es ¿Como podemos programar los radiobutton y los checkbox? bueno para esto debemos de entender que se manipulan exactamente igual, la única diferencia es su comportamiento ante el usuario donde:

  • RadioButton solo nos permite seleccionar solo una opción de la lista.
  • El checkbox podemos seleccionar múltiples elementos

Vamos directo al código y veamos que es lo que hicimos para recorrer nuestros checkbox y nuestros radiobutton desde jQuery.

en nuestro index.html solo tenemos puro HTML donde solo punto un panel nativo de Boostrap(ojo también importe las librerías necesarias para usar Bootstrap).

En nuestro archivo main.js tenemos el evento clic del botón y dos funciones:

  1. recorrerDiasSemana : donde tenemos un each donde va recorriendo nuestros radiobuttons y va validando si esta seleccionado entonces entra a un if y guarda el valor en una variable.
  2. recorrerListacompras : donde también tenemos un each y va validando todos los elementos que hallamos seleccionado y voy concatenando en una variable el valor de los checkbox seleccionados.

En el archivo estilos.css solo tenemos dos reglas :

  1. para que nuestro body comience 20px más abajo.
  2. una clase donde le damos un ancho y un margen de pie de 10px.

*********Ver Ejemplo*********

Conclusión : Existen muchisimas formas de obtener el valor de los CheckBox y Radiobutton yo solo les mostré una de las formas más fáciles de entender sobre como recorrer los elementos con jQuery.

2 thoughts on “jQUERY: Recorrer checkbox y radiobutton

  1. Hola amigo buen post pero no resuelve mi inconveniente, tengo un problema y me gustaria que me ayudaras, tengo una tabla con radios como lo muestro aca abajo.

    @For Each item As System.Data.DataRow In dtpreguntas.Select(“”, “”)
    @
    @(item(“cricod”).ToString)

    @(item(“crinom”).ToString)

    contador = contador + 1
    Next

    como se observa tengo una tabla dinamica con un grupo4 de radios que tienen un sub indice. necesito validar que todos los radios esten seleccionados antes de hacer un insert en la tabla tengo una funcion javascript

    var grupo3_ = document.getElementsByName(“grupo3_0”);
    var seleccionado2 = false;

    for (var i = 0; i < grupo3_.length; i++) {
    if (grupo3_[i].checked) {
    seleccionado2 = true;
    grupo3_[i];
    }
    }
    if (seleccionado2 == false) {
    NotificacionPopup('error', 'Todas las preguntas son obligatorias');
    }
    el primer radio se inicializa automaticamente por el indice en (0) necesito hacer dinamico ese indice para poder recorrer todos los grupos de radios. el solamente recorre el primer grupo pero cuando abajo le intento incrementar el indice a 1 se sale, por favor ayudame.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.