consulta casillas de verificacion
tricky22
14 de Marzo del 2006
Hola, q tal?!vereis. Tengo un menú de pestañas (horizontal) y cada pestaña tengo unos submenús donde hay unas cuantas opciones con su correspondiente casilla de verificación a su izquierda. El caso es que quiero hacer que cuando vaya seleccionando cada una de las opciones que hay, me vayan apareciendo en un frame vertical que tendré a la izquierda, o en una textarea o lo que sea. Como lo puedo hacer??Muchas gracias.
Un saludo,
Tricky.
Un saludo,
Tricky.
tricky22
14 de Marzo del 2006
Al final he averiguado como. Me ha sido muy util este link http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/getelementbyid.asp
<html>
<head>
<title>prova</title>
<script language="JavaScript">
var lista = new Array(50)
var cont = 1
function carga(nombre,valor,id){
var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR")
var td1 = document.createElement("TD")
if (valor){
lista[cont] = nombre
td1.appendChild(document.createTextNode(lista[cont]))
row.appendChild(td1);
tbody.appendChild(row);
cont ++
}else{
for(var i=1;i<cont;i++){
if (lista[i]==nombre){
tbody.deleteRow(i);
for (var j=i;j<=cont;j++) lista[j]=lista[j+1]
}
}
cont--
}
}
</script>
</head>
<body bgcolor="#CC0099">
<form name="form1" method="post" action="">
<div align="center">
<table width="100%" height="323" border="0" cellspacing="0">
<tr>
<td width="44%" valign="top">
<div align="center">
<table width="133" border="2" cellspacing="0" bgcolor="#FFFFFF" bordercolor="#000000" bordercolordark="#999999">
<tr>
<td><div align="center"><strong>OPCIONES</strong></div></td>
</tr>
<tr>
<td height="299" valign="top" align="center">
<table id="tabla_atributos" width="120" cellspacing="0" border="0">
<tbody>
<tr>
<td height="1"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div></td>
<td width="56%" valign="top">
<p> </p><table border="1" cellspacing="0" bordercolor="#000000">
<tr>
<td> <input name="opcion1" type="checkbox" onClick="javascript:carga('opcion1',opcion1.checked,'tabla_atributos')">
Opción 1</td>
<td> <input type="checkbox" name="opcion2" onClick="javascript:carga('opcion2',opcion2.checked,'tabla_atributos')">
Opción 2</td>
<td> <input type="checkbox" name="opcion3" onClick="javascript:carga('opcion3',opcion3.checked,'tabla_atributos')">
Opción 3</td>
<td> <input type="checkbox" name="opcion4" onClick="javascript:carga('opcion4',opcion4.checked,'tabla_atributos')">
Opción 4</td>
</tr>
<tr>
<td> <input type="checkbox" name="opcion5" onClick="javascript:carga('opcion5',opcion5.checked,'tabla_atributos')">
Opción 5</td>
<td><input type="checkbox" name="opcion6" onClick="javascript:carga('opcion6',opcion6.checked,'tabla_atributos')">
Opción 6</td>
<td><input type="checkbox" name="opcion7" onClick="javascript:carga('opcion7',opcion7.checked,'tabla_atributos')">
Opción 7</td>
<td><input type="checkbox" name="opcion8" onClick="javascript:carga('opcion8',opcion8.checked,'tabla_atributos')">
Opción 8</td>
</tr>
</table></td>
</tr>
</table>
</div>
</form>
</body>
</html>
<html>
<head>
<title>prova</title>
<script language="JavaScript">
var lista = new Array(50)
var cont = 1
function carga(nombre,valor,id){
var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR")
var td1 = document.createElement("TD")
if (valor){
lista[cont] = nombre
td1.appendChild(document.createTextNode(lista[cont]))
row.appendChild(td1);
tbody.appendChild(row);
cont ++
}else{
for(var i=1;i<cont;i++){
if (lista[i]==nombre){
tbody.deleteRow(i);
for (var j=i;j<=cont;j++) lista[j]=lista[j+1]
}
}
cont--
}
}
</script>
</head>
<body bgcolor="#CC0099">
<form name="form1" method="post" action="">
<div align="center">
<table width="100%" height="323" border="0" cellspacing="0">
<tr>
<td width="44%" valign="top">
<div align="center">
<table width="133" border="2" cellspacing="0" bgcolor="#FFFFFF" bordercolor="#000000" bordercolordark="#999999">
<tr>
<td><div align="center"><strong>OPCIONES</strong></div></td>
</tr>
<tr>
<td height="299" valign="top" align="center">
<table id="tabla_atributos" width="120" cellspacing="0" border="0">
<tbody>
<tr>
<td height="1"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div></td>
<td width="56%" valign="top">
<p> </p><table border="1" cellspacing="0" bordercolor="#000000">
<tr>
<td> <input name="opcion1" type="checkbox" onClick="javascript:carga('opcion1',opcion1.checked,'tabla_atributos')">
Opción 1</td>
<td> <input type="checkbox" name="opcion2" onClick="javascript:carga('opcion2',opcion2.checked,'tabla_atributos')">
Opción 2</td>
<td> <input type="checkbox" name="opcion3" onClick="javascript:carga('opcion3',opcion3.checked,'tabla_atributos')">
Opción 3</td>
<td> <input type="checkbox" name="opcion4" onClick="javascript:carga('opcion4',opcion4.checked,'tabla_atributos')">
Opción 4</td>
</tr>
<tr>
<td> <input type="checkbox" name="opcion5" onClick="javascript:carga('opcion5',opcion5.checked,'tabla_atributos')">
Opción 5</td>
<td><input type="checkbox" name="opcion6" onClick="javascript:carga('opcion6',opcion6.checked,'tabla_atributos')">
Opción 6</td>
<td><input type="checkbox" name="opcion7" onClick="javascript:carga('opcion7',opcion7.checked,'tabla_atributos')">
Opción 7</td>
<td><input type="checkbox" name="opcion8" onClick="javascript:carga('opcion8',opcion8.checked,'tabla_atributos')">
Opción 8</td>
</tr>
</table></td>
</tr>
</table>
</div>
</form>
</body>
</html>