<!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>
Crear cuenta
Comentarios sobre la versión: Versión 1 (0)
No hay comentarios