Close

jQUERY: Recorrer checkbox y radiobutton

darmando.liraHTML / Javascript / jQuery2 Comments

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).

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE HTML>
<html lang="es-ES">
<head>
  <title>Desarrollo Hidrocálido - Recorrer Checkbox o RadioButton con JQuery</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="estilos.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">DESARROLLO HIDROCÁLIDO</h3>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p>Días de La Semana</p>
                            <div class="radio">
                              <label>
                                <input type="radio" name="diasSemana" value="Lunes">Lunes
                              </label>
                            </div>
                            <div class="radio">
                              <label>
                                <input type="radio" name="diasSemana" value="Martes">Martes
                              </label>
                            </div>
                            <div class="radio">
                              <label>
                                <input type="radio" name="diasSemana" value="Miércoles">Miércoles
                              </label>
                            </div>
                            <div class="radio">
                              <label>
                                <input type="radio" name="diasSemana" value="Jueves">Jueves
                              </label>
                            </div>
                            <div class="radio">
                              <label>
                                <input type="radio" name="diasSemana" value="Viernes">Viernes
                              </label>
                            </div>
                            <div class="radio">
                              <label>
                                <input type="radio" name="diasSemana" value="Sábado">Sábado
                              </label>
                            </div>
                            <div class="radio">
                              <label>
                                <input type="radio" name="diasSemana" value="Domingo">Domingo
                              </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <p>Lista de Compras</p>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" name="listacompras" value="1Kg. de Arroz">1Kg. de Arroz
                              </label>
                            </div>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" name="listacompras" value="1kg. de Frijoles">1kg. de Frijoles
                              </label>
                            </div>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" name="listacompras" value="Servilletas">Servilletas
                              </label>
                            </div>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" name="listacompras" value="1Lt. Leche">1Lt. Leche
                              </label>
                            </div>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" name="listacompras" value="1kg. Queso">1kg. Queso
                              </label>
                            </div>
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" name="listacompras" value="Papel de Baño">Papel de Baño
                              </label>
                            </div>
                            <button type="button" class="btn btn-primary btn-lg btn-block" id="btnMiBotonsito">ACEPTAR</button>
                        </div>
                     </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>  
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>

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.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
  $("#btnMiBotonsito").click(function(){
      if (! $("input[name=diasSemana]").is(":checked") ) {
         alert("Por Favor Seleccionar algún día de la Semana");
         return false;
      }
      if (! $("input[name=listacompras]").is(":checked") ) {
         alert("Por Favor Seleccionar algún elemento de la lista de compras");
         return false;
      }
      alert("El Dia de Hoy: "+recorrerDiasSemana()+" \n Harás las compras siguientes : \n"+recorrerListacompras());
  });
  function recorrerListacompras(){
    var listaCompras = '';
    $("input[name=listacompras]").each(function (index) {  
       if($(this).is(':checked')){
          listaCompras += '*'+$(this).val()+'\n';
       }
    });
    return listaCompras;
  }
 
  function recorrerDiasSemana(){
    var listaDias = '';
    $("input[name=diasSemana]").each(function (index) {
       if($(this).is(':checked')){
          listaDias = $(this).val();
       }
    });
    return listaDias;
  }

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.

CSS
1
2
3
4
5
6
7
body{
padding-top:20px;
}
.panel-body .btn:not(.btn-block){
  width:120px;
  margin-bottom: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.

More from my site

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.

    Reply

Leave a Reply

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

CAPTCHA

*

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