Iterar los elementos seleccionados de un checkbox array en jQuery

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

Obtener el valor de un radio button seleccionado con jQuery

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/

Asignar formato a la fecha del jQuery UI Datepicker

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

Obtener el valor de un grupo de Checkbox con jQuery

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.

Resetear elemento select con jQuery

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');

inArray() jQuery

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/

Trabajando juntas jQuery y Prototype

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

UI Dialog con iframe

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.

A %d blogueros les gusta esto: