Validar imput tipo radio

luiseduardovsqz359 · #1 (**permalink**) 11/05/2012, 10:23

Compañeros, tengo un formulario el cual es una lista de chequeo, en él hay varios imput tipo radio, los cuales presentan dos opciones 'si' o 'no'. Al final hay otro imput que presenta la opción 'si' o 'no', el objetivo es que éste tome la opción 'si' al estar los otros en la opción 'si' y tome la opción 'no' al estar los otros en 'no' o con solo que uno esté en 'no' . En este momento esta opción la toma el usuario, pero quiero saber si es posible que esto ocurra de manera automática, sin que el usuario intervenga, o sea, si todos están en 'si', se active la opción 'si', y lo contrario si alguno o todos están en 'no'. Adjunto el código. Gracias.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FORMULARIO LISTA DE CHEQUEO</title>
</head>
<body>
<form name="lista_de_chequeo" method="post" form action="form_lista_de_chequeo.php" onSubmit="return validar(this)">

<table class="cuerpo1" border="1" cellspacing="0" cellpadding="0">
<tr>
<td class="tituloA"align="center">No</td>
<td class="tituloB" align="center">ITEM</td>
<td class="tituloC" align="center">CUMPLIDO</td>
<td class="tituloD" align="center">OBSERVACIONES</td>
</tr>
<tr>
<td class="tituloA" align="center"> 1</td>
<td class="tituloA">Galpón sometido a bioseguridad en su tiempo</td>
<td align="center"><input name="sino1" type="radio"value="SI"> SI <input name="sino1" type="radio" value="NO"> NO</td>
<td align="center"><textarea class="estilotextarea" name="observa1" id="observa1"></textarea></td>
</tr>
<tr class="tituloA" >
<td align="center" >2</td>
<td class="tituloA">Galpón limpio </td>
<td align="center" ><input name="sino2" type="radio"value="SI"> SI <input name="sino2" type="radio" value="NO"> NO</td>
<td align="center"><textarea class="estilotextarea"name="observa2" id="observa2"></textarea></td>
</tr>
<tr class="tituloA">
<td align="center">3</td>
<td>Galpón lavado </td>
<td align="center"><input name="sino3" type="radio"value="SI"> SI <input name="sino3" type="radio" value="NO"> NO</td>
<td align="center"><textarea class="estilotextarea" name="observa3" id="observa3"></textarea></div></td>
</tr>
<tr class="tituloA">
<td align="center">4</td>
<td>Galpón desinfectado </td>
<td align="center"><input name="sino4" type="radio"value="SI"> SI <input name="sino4" type="radio" value="NO"> NO</td>
<td align="center"><textarea class="estilotextarea" name="observa4" id="observa4"></textarea></div></td>
</tr>
<tr class="tituloA">
<td align="center">5</td>
<td>Galpón encalado </td>
<td align="center"><input name="sino5" type="radio"value="SI"> SI <input name="sino5" type="radio" value="NO"> NO</td>
<td align="center"><textarea class="estilotextarea" name="observa5" id="observa5"></textarea></div></td>
</tr>
<tr class="tituloA">
<td align="center">6</td>
<td>Tanque de almacenamiento de agua limpio lavado y desinfectado </td>
<td align="center"><input name="sino6" type="radio"value="SI"> SI <input name="sino6" type="radio" value="NO"> NO</td>
<td align="center"><textarea class="estilotextarea" name="observa6" id="observa6"></textarea></div></td>
</tr>
<tr align="center" class="tituloA">
<td align="center">Concepto</td>
<td align="left"> Aprobado</td>
<td><input name="aprobado" type="radio"value="SI"> SI <input name="aprobado" type="radio"value="NO"> NO</td>
<td align="center"><textarea class="estilotextarea" name="observa28" id="observa28"></textarea></td>
</tr>
</table>
<p align="center">
<input type='submit' name='boton' class='boton' value='Guardar'>
<input id="consulta" class="boton" name="consulta" type="button" value="Consultar" style='cursor:pointer' onclick="Ifr_reporte.location.href='ver_lista_de_c hequeo.php';" />
<input type="reset" name="boton2" value="Cancelar" class="boton" />
<tr align="center">
</p>
<table width="100%" height="5%" border="1" align="center" cellspacing="1" cellpadding="1" >
<tr align='center'>
<td valign='top' >
<center>
<iframe name='Ifr_reporte' width='99%' height='250' align='center' frameborder='0' src='blanco1.html'></iframe>
</center>
</td>
</tr>
</table>
</form>
</body>
</html>

ocp001a · #2 (**permalink**) 11/05/2012, 10:55

Para que estén marcados por defecto, lo puedes indicar al hacer el html, con la etiqueta checked, es decir: <input name="aprobado" type="radio"value="SI" checked>

Para lo otro, que se ponga en si o no según el usuario marque los radios anteriores, necesitarás javascript.

funkii · #3 (**permalink**) 11/05/2012, 10:56

Si entendí bien lo que queres hacer, eso lo haces con javasript, ya que con PHP tenes que recargar la pagina y eso es molesto para le usuario.

Poniendo el campo que queres que se muestre según X valor en visibility: hidden; con CSS, y después haciendo una funcion en JS, la cual evalúe el valor de los inputs anteriores y según éste te muestre o no el campo.

var campo1 = document.getElementById('campo');
var campo_opcional = document.getElementById('campo_opcional');

function cambiarValor () {
if (campo1.value == "si") {
campo_opcional.style.visibility = "visible";
} else {
campo_opcional.style.visibility = "hidden";
}
}

Saludos

stramin · #4 (**permalink**) 11/05/2012, 11:01

Eso lo haces con javascript

Lo primero es que debes ponerle ID a todos los checkbox

Esto serìa para los radio superiores, fijate que tambien he agregado una funcion al cambiarlos
<input name="sino6" type="radio" value="SI" id="si6" onchange="test();"> SI
<input name="sino6" type="radio" value="NO" id="no6" onchange="test();"> NO
--------
esto sería para los ultimos
<input name="aprobado" type="radio"value="SI" id="apsi"> SI
<input name="aprobado" type="radio"value="NO" id="apno" > NO

esta sería la funcion:

Código Javascript:

Ver original<script>
function test(){
var si=1; // creo 2 variables que comienzan en 1
var no=1;
for(f=1;f<=6;f++){
if(document.getElementById('si'+f).checked==false) si=0; // si al menos uno no está marcado queda en 0
if(document.getElementById('no'+f).checked==false) no=0; // si al menos uno no está marcado queda en 0
}
if(si) document.getElementById('apsi').checked=true;
else document.getElementById('apsi').checked=false;
if(no) document.getElementById('apno').checked=true;
else document.getElementById('apno').checked=false;
}
</script>

no la he probado
-------------------------
aquí está completo y probado:

Código Javascript:

Ver original<p>
<input name="sino1" type="radio" value="SI" id="si1" onchange="test();"> SI
<input name="sino1" type="radio" value="NO" id="no1" onchange="test();"> NO
</p>
<p>
<input name="sino2" type="radio" value="SI" id="si2" onchange="test();"> SI
<input name="sino2" type="radio" value="NO" id="no2" onchange="test();"> NO
</p>
<p>
<input name="sino3" type="radio" value="SI" id="si3" onchange="test();"> SI
<input name="sino3" type="radio" value="NO" id="no3" onchange="test();"> NO
</p>
<p>
<input name="sino4" type="radio" value="SI" id="si4" onchange="test();"> SI
<input name="sino4" type="radio" value="NO" id="no4" onchange="test();"> NO
</p>
<p>
<input name="sino5" type="radio" value="SI" id="si5" onchange="test();"> SI
<input name="sino5" type="radio" value="NO" id="no5" onchange="test();"> NO
</p>
<p>
<input name="sino6" type="radio" value="SI" id="si6" onchange="test();"> SI
<input name="sino6" type="radio" value="NO" id="no6" onchange="test();"> NO
</p>
--------
<p>
<input name="aprobado" type="radio"value="SI" id="apsi"> SI
<input name="aprobado" type="radio"value="NO" id="apno" > NO
</p>
<script>
function test(){
var si=1; // creo 2 variables que comienzan en 1
var no=1;
for(f=1;f<=6;f++){
if(document.getElementById('si'+f).checked==false) si=0; // si al menos uno no está marcado queda en 0
if(document.getElementById('no'+f).checked==false) no=0; // si al menos uno no está marcado queda en 0
}
if(si) document.getElementById('apsi').checked=true;
else document.getElementById('apsi').checked=false;
if(no) document.getElementById('apno').checked=true;
else document.getElementById('apno').checked=false;
}
</script>