domingo, 17 de febrero de 2013

Obtener value de input radio y estado de checkbox con Jquery



En el siguiente ejemplo veremos como se pueden obtener el valor del elemento input radio y el estado en el que se encuentra un input checkbox (true|false), el uso de estas propiedades es necesario para interactuar con la información o contenido que será mostrado al usuario, así por ejemplo si se elige una opción de radio mostrar el contenido establecido para el valor del input radio, o dependiendo de si el checkbox es true o false mostrar una información u otra.


uno dos tres

Estado


Código de ejemplo ...

<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script>
$(function()
{
$("#v_radio").click(function()
{
$("#estado_radio").text("Radio value: " + $(":input[name=_radio]:checked").val());
});

$("#v_checkbox").click(function()
{
$("#estado_checkbox").text("Estado checkbox: " + $("#_checkbox").is(":checked"));
});
});
</script>
</head>
<body>
 <center>
<form>
<div id="estado_radio"></div>
<input type="radio" name="_radio" value="uno" checked>uno
<input type="radio" name="_radio" value="dos">dos
<input type="radio" name="_radio" value="tres">tres
<input type="button" id="v_radio" value="Value Radio">
<br><br>
<div id="estado_checkbox"></div>
<input type="checkbox" id="_checkbox">Estado
<input type="button" id="v_checkbox" value="Estado Checkbox"><br>
</form>
</center>
</body>
</html>