<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- http://www.lawebdelprogramador.com -->
<title>La Web del Programador - Ejemplo de obtener, agregar y eliminar estilos a un id</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
/** Seleccionamos el elemento con el valor 1 */
$("#selecciona1").click(function(){
$("input:radio[name=radio1]", "#miformulario").filter("[value=1]").prop("checked", true);
// ejecutamos el evento change()
$("input:radio[name=radio1]", "#miformulario").change();
});
/** Seleccionamos el elemento con el valor 4 */
$("#selecciona4").click(function(){
$("input:radio[name=radio1]", "#miformulario").filter("[value=4]").prop("checked", true);
// ejecutamos el evento change()
$("input:radio[name=radio1]", "#miformulario").change();
});
/** eliminamos la posible seleccion */
$("#desactivar").click(function(){
var valor=$("input:radio[name=radio1]:checked", "#miformulario").val();
if(valor)
{
$("input:radio[name=radio1]", "#miformulario").filter("[value="+valor+"]").prop("checked", false);
// ejecutamos el evento change()
$("input:radio[name=radio1]", "#miformulario").change();
}
});
/** validamos que haya un valor del desplegable seleccionado */
$("#validar").click(function(){
var valor=$("input:radio[name=radio1]:checked", "#miformulario").val();
if(valor)
{
alert("Esta seleccionado el valor: "+valor);
}else{
alert("No hay ninguna opcion seleccionada");
}
});
/** Mostramos el valor seleccionado */
$("input:radio[name=radio1]", "#miformulario").change(function(){
var valor=$("input:radio[name=radio1]:checked", "#miformulario").val();
if(valor)
{
$("#valorSeleccionado").html(valor);
}else{
$("#valorSeleccionado").html("");
}
});
})
</script>
<style>
div {display:inline-block;clear:both;border:1px solid;cursor:pointer;margin:3px;padding:5px;}
</style>
</head>
<body>
<h1>Ejemplo de utilizar jquery con un select</h1>
<form id="miformulario">
<input type="radio" name="radio1" value="1"> 1
<input type="radio" name="radio1" value="2"> 2
<input type="radio" name="radio1" value="3"> 3
<input type="radio" name="radio1" value="4"> 4
<input type="radio" name="radio1" value="5"> 5
</form>
<!-- mostramos el valor seleccionado en cada momento -->
<p id='valorSeleccionado'></p>
<div id='selecciona1'>Seleccionar el 1 elemento</div>
<div id='selecciona4'>Seleccionar el 4 elemento</div>
<div id='desactivar'>Desactivamos el elemento activo</div>
<div id='validar'>Validar que haya un elemento seleccionado</div>
</body>
</html>
Comentarios sobre la versión: Versión 1 (0)
No hay comentarios