Iterar los elementos seleccionados de un checkbox array en jQuery

16/10/2013 Deja un comentario

Supongamos que tenemos el siguiente Checkbox array HTML:

<input type="checkbox" name="paises[]" value="Brasil" />
<input type="checkbox" name="paises[]" value="Rusia" />
<input type="checkbox" name="paises[]" value="India" />
<input type="checkbox" name="paises[]" value="China" />

Si queremos determinar solo los elementos que han sido seleccionados, con jQuery realizamos la iteración del input checkbox asi:

$("input[name='paises[]']:checked").each(function() {
    alert($(this).val());
});
Anuncios

Filed under jQuery, Programación Tagged with

Obtener el valor de un radio button seleccionado con jQuery

10/10/2013 Deja un comentario

Para obtener el valor del elemento seleccionado de un radio button lo realizamos de la siguiente forma con el selector :checked de jQuery:

$("input[name='radioButton']:checked").val();

+Info
http://api.jquery.com/

Filed under jQuery, Programación

Asignar formato a la fecha del jQuery UI Datepicker

01/02/2013 Deja un comentario

Para asignar el formato de fecha en el elemento detepicker lo haríamos de la siguiente forma desde javascript:

$(function() {
    $('#datepicker').datepicker({dateFormat:'yy-mm-dd'});
});

Para el ejemplo anterior estaríamos utilizando el formato ISO 8601 (2013-02-01), otros formatos a utilizar serian los siguientes de acuerdo a la documentación oficial de jQuery UI:

mm/dd/yy
yy-mm-dd
d M, y
d MM, y
DD, d MM, yy
'day' d 'of' MM 'in the year' yy

Filed under JavaScript, jQuery, Programación

Obtener el valor de un grupo de Checkbox con jQuery

28/11/2012 6 comentarios

Supongamos que tenemos el un formulario HTML el cual contiene un grupo de checkbox y nuestro objetivo es identificar el valor de las opciones que se han seleccionado, con jQuery lo podemos resolver de la siguiente forma:

HTML

<input type="checkbox" name="categoria[]" value="0" />
<input type="checkbox" name="categoria[]" value="1" />
<input type="checkbox" name="categoria[]" value="2" />
<input type="checkbox" name="categoria[]" value="3" />
<input type="button" id="enviar" value="enviar" />

jQuery

$(function() {
    $('#enviar').click(function() {
        var categorias = new Array();

        $("input[@name='categoria[]']:checked").each(function() {
            categorias.push($(this).val());
        });

        alert(categorias);
    });
});

Debes incluir la librería de jQuery para que funcione correctamente.

Filed under JavaScript, jQuery, Programación, Uncategorized

Resetear elemento select con jQuery

01/08/2012 3 comentarios

Para resetear un elemento select de HTML con jQuery lo podemos realizar de estas dos formas:

var select = $('#elemento');
select.val($('option:first', select).val());

O también:

$('#elemento').find('option:first').attr('selected', 'selected').parent('select');

Filed under jQuery, Programación

inArray() jQuery

04/03/2012 5 comentarios

Busca si un valor especificado existe en un array, devuelve -1 si el valor no es encontrado, en caso contrario retorna el valor de la posición (index) del valor dentro del array.

SINTAXIS:
jQuery.inArray( value, array [, fromIndex] )

Donde:
value. El valor a buscar
array. El array en donde se realiza la búsqueda.
fromIndex. El indice en el que inicia la búsqueda (opcional).

Ejemplos:

var arr = ["python",3,6,"ruby","php"];
var result;
		
result = jQuery.inArray("php",arr);
/* result = 4 */

result = jQuery.inArray("python",arr);
/* result = 0 */

result = jQuery.inArray("html",arr);
/* result = -1 */

result = jQuery.inArray("ruby",arr,1);
/* result = 3 */

Fuente:
http://api.jquery.com/jQuery.inArray/

Filed under jQuery, Programación

Trabajando juntas jQuery y Prototype

01/02/2012 1 comentario

Que pasa cuando estamos haciendo uso de jQuery y por diversas razones queremos utilizar también alguna otra librería como por ejemplo Prototype?, esta situación se me presento en estos días, para evitar conflictos entre ambas librerías y lograr que trabajen juntas sin problema alguno debemos utilizar la función jQuery.noConflict(), a continuación les dejo un ejemplo muy simple esperando les sea de gran ayuda:

<!DOCTYPE html>
<html>
    <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>jQuery y Prototype</title>
	<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
	<script type="text/javascript" src="prototype.js"></script>
	<script type="text/javascript">
	    var $j = jQuery.noConflict();

	    $j(function() {
		$j('#boton').click(function () {
		    $j('#content').text('Presionado');
		});
	    });
	</script>
    </head>
    <body>
	<div id="content"></div>
	<input type="button" id="boton" value="presionar">
    </body>
</html>

Fuente:
http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Filed under jQuery, Programación

UI Dialog con iframe

14/01/2012 5 comentarios

Usando la libreria de jQuery y jQuery UI vamos a ver como podemos mostrar contenido en el widget Dialog mediante el uso de un iframe. Para este ejemplo el contenido a mostrar lo obtendremos de un archivo html.


<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>jQuery UI Dialog</title>
		<link type="text/css" href="css/ui-lightness/jquery-ui.custom.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery-ui.custom.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$.fx.speeds._default = 1000;
				
				// iframe que vamos a cargar en el UI Dialog
				var iframe = $('<iframe src="contenido.html"  />');
					
				// UI Dialog
				iframe.dialog({
					autoOpen: false,
					modal: true,
					show: "blind",
					title: "UI Dialog",
					resizable: false,
					width: 300,
					height: 190,
					hide: "explode",
				});
				
				$('#openDialog').click(function() {
					iframe.dialog('open');
					return false;
				});
			});
		</script>

		<style type="text/css">
			/*demo page css*/
			body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
		</style>	
	</head>
	<body >
		<input type="button" id="openDialog" value="UI Dialog">
	</body>
</html>

El contenido que mostramos lo traemos del archivo llamado contenido.html, la documentación completa para los widget Dialog la puedes encontrar en la página oficial del proyecto ( consultar aqui ), te recomiendo que le des un vistazo y revises los ejemplos que se incluyen.

Filed under jQuery, Programación

A %d blogueros les gusta esto: