Actualidad jQuery

Después de enseñaros como trabajar con los campos checkbox y los select, ahora vamos con los input radio que funcionan igual que los checkbox.

Vamos a comprobar con un botón el estado del radio, si está checked o no, y con otros botones vamos a activarlo y desactivarlo, para que veáis lo sencillo que es.

Primero vamos a comprobar el estado del radio:

$(document).ready(function(){

	$("#radio_comprobar").click(function() {
		if($("#radio").is(':checked')) {
			alert("Está activado");
		} else {
			alert("No está activado");
		}
	});

});

Una vez que presionemos el botón recibiremos en un alert la respuesta a si está activado o no el radio gracias a la función is(':checked')

Para terminar vamos a activar y desactivar el radio sin hacer click sobre él con estos 2 botones:

$(document).ready(function(){

	$("#radio_activar").click(function() {
		$("#radio").attr('checked', true);
	});

	$("#radio_desactivar").click(function() {
		$("#radio").attr('checked', false);
	});

});

El código HTML quedaría de esta forma:

<input name="radio" id="radio" type="radio" value="1" />
<input name="radio_comprobar" id="radio_comprobar" type="button" value="Comprobar" />
<input name="radio_activar" id="radio_activar" type="button" value="Activar" />
<input name="radio_desactivar" id="radio_desactivar" type="button" value="Desactivar" />

• Ejemplo

Ayer os explicabamos como trabajar con los campos checkbox, validar su estado y cambiar su estado mediante jQuery. Hoy vamos a hacer lo mismo pero con un campo select.

Hemos creado 4 botones, 1 botón para comprobar el estado del select, y los otros 3 botones para cambiar la opción seleccionada.

Primero vamos a obtener la opción seleccionada del select, el id y el texto, presionando sobre el botón.

$(document).ready(function(){

	$("#select_comprobar").click(function() {
		alert("Id: "+$("#sexo option:selected").val()+" | Texto: "+$("#sexo option:selected").text());
	});

});

Una vez que presionemos el botón recibiremos en un alert el id y el texto de la opción seleccionada, gracias al atributo option:selected ($("#sexo option:selected").val() / $("#sexo option:selected").text())

Para terminar vamos a cambiar la opción seleccionada del select con estos 3 botones:

$(document).ready(function(){

	$("#select_cambiar_defecto").click(function() {
		$("#sexo option[value=0]").attr("selected",true);
	});

	$("#select_cambiar_hombre").click(function() {
		$("#sexo option[value=1]").attr("selected",true);
	});

	$("#select_cambiar_mujer").click(function() {
		$("#sexo option[value=2]").attr("selected",true);
	});

});

El código HTML quedaría así:

<select name="sexo" id="sexo">
<option value="0">- Seleccionar -</option>
<option value="1">Hombre</option>
<option value="2">Mujer</option>
</select>

<input name="select_comprobar" id="select_comprobar" type="button" value="Comprobar" />
<input name="select_cambiar_defecto" id="select_cambiar_defecto" type="button" value="Seleccionar defecto" />
<input name="select_cambiar_hombre" id="select_cambiar_hombre" type="button" value="Seleccionar hombre" />
<input name="select_cambiar_mujer" id="select_cambiar_mujer" type="button" value="Seleccionar mujer" />

• Ejemplo

Otra de las facilidades que nos encontramos en jQuery es validar formularios, y trabajar con ellos dinámicamente.

Vamos a comprobar con un botón el estado del checkbox, si está checked o no, y con otros botones vamos a activarlo y desactivarlo, para que veáis lo sencillo que es.

Primero vamos a comprobar el estado del checkbox:

$(document).ready(function(){

	$("#checkbox_comprobar").click(function() {
		if($("#checkbox").is(':checked')) {
			alert("Está activado");
		} else {
			alert("No está activado");
		}
	});

});

Una vez que presionemos el botón recibiremos en un alert la respuesta a si está activado o no el checkbox gracias a la función is(':checked')

Para terminar vamos a activar y desactivar el checkbox sin hacer click sobre él con estos 2 botones:

$(document).ready(function(){

	$("#checkbox_activar").click(function() {
		$("#checkbox").attr('checked', true);
	});

	$("#checkbox_desactivar").click(function() {
		$("#checkbox").attr('checked', false);
	});

});

El código HTML quedaría de esta forma:

<input name="checkbox" id="checkbox" type="checkbox" value="1" />
<input name="checkbox_comprobar" id="checkbox_comprobar" type="button" value="Comprobar" />
<input name="checkbox_activar" id="checkbox_activar" type="button" value="Activar" />
<input name="checkbox_desactivar" id="checkbox_desactivar" type="button" value="Desactivar" />

• Ejemplo