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).
|
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:
- 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.
- 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.
|
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 :
- para que nuestro body comience 20px más abajo.
- una clase donde le damos un ancho y un margen de pie de 10px.
|
1 2 3 4 5 6 7 |
body{ padding-top:20px; } .panel-body .btn:not(.btn-block){ width:120px; margin-bottom:10px; } |
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.
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.
bueno no se visualiza la tabla