marcar check box y que se marque otro de igual nombre.

[kikeking1]

Bien haber si consigo explicarme claramente, porque no estoy muy seguro de como expresar esto.

El problema que tengo es el siguiente, pero antes dare una pequeña descripcion de la pagina para que hagais una idea de la locura que estoy llevando a acabo :D.

Tengo la pagina principal, al pulsar sobre una imagen hago una llamada que me abre un div que esta oculto y se posiciona sobre la pagina (z-index=1) ahora en este contenedor tengo varias opciones que al picarla, se abre otro contendor oculto y se posiciona por encima de este (z-index=2). y para mas inri aun, en este ultimo contendor tambien contengo la opcion de abrir otro contenedor mas que tambien esta oculto y posicionarlo encima de todos (z-indez=3).

bien en el contenedor de z-index=2, tengo una serie de cheack box (como maximo 4) y en el contenedor z-index=3, una lista de check box (variable, sin limite).

Estos check son generados mediante un while() y cada cual recibe un nombre.

Los hasta 4 check de z-index=2, siempre estaran presente en el z-index=3 aunque en este ultimo hayan mas. y tenienen el mismo nombre.

y lo que quiero hacer exactamente es, que si pulso tanto el check de z-index=2 como el del z-index=3 se marque su similar, el que tiene el mismo nombre en el contenedor donde no se haya marcado (es decir si pico a juanito en z-index=3, que se me marque tambien juanito que esta en z-index=2)


tengo mas o menos una dia de como hacerlo, pero sinceramente no se como meterle mano a esto, por donde empezar


Recuerdo, los check tanto de una capa como de la otra, que son iguales, tienen el mismo nombre. ademas tambien se ordenan siguiendo el mismo orden (por si puede ayudar para realizar un array o algo asi)


el codigo que uso para generar esto es el siguiente (estos son los dos contenedores):

Código:

<div id="invita" style="z-index:3; position:absolute; width:2000; height:1500; left: 0%; top: 0%; background-color:#000000; opacity:.5; filter:alpha(opacity=50); -moz-opacity: 0.5; display:none;"></div>
<div id="invita2" style="z-index:4; position:absolute; width:50%; height:50%; left:35%; top:20%; display:none; ">
<table bgcolor="#FFFFFF" width="70%" height="50%" cellpadding="0" cellspacing="0">
<tr bgcolor="#B9EEEE" bordercolor="#B9EEEE"><td width="80%" height="1%"><span class='text'>&nbsp;Invitar a un Amigo al Evento</span></td><td width="20%" height="1%" align="right"><span class='text' ><a onClick="invitatodo()">Mis Amigos&nbsp;&nbsp;</a><a onClick="invitacierra()">X&nbsp;</a></span></td></tr>
<tr><td height="99%" colspan="2">
	<table> <form method='POST' action='index.php?asu=12&ids=<?=$ids;?>&idsb=<?=$idsb;?>&evento=2' enctype='multipart/form-data'  >
	<tr><td colspan="2">
	<table align="center"><tr>
	<?php 
	while ($row = mysql_fetch_array($miconexion->Consulta_ID)){
 	$miconexion2->consulta($consulta="SELECT * FROM usuarios INNER JOIN amigos ON (id_usuario = id_amigo_solicitado )WHERE   ( id_amigo_solicita ='".$row['id_usuario']."' )AND ( id_amigo_solicitado = ".$_SESSION['id']." )  AND valida_amigo='si' AND estado_usuario = 'activo'  ORDER BY  fecha_actualizacion_amigo DESC");
	if ($total_amigos_lim < 4 AND $row11 = mysql_fetch_array($miconexion2->Consulta_ID)){
	    $total_amigos_lim = $total_amigos_lim +1;
		if(empty($row['foto_abopro'])){$foto = USUSINFOTO;}else{ $foto = $row['foto_abopro'];}
		echo "<td><table><tr><td><div class='ajustar_div'  ><a href='index.php?asu=6&id=".$row['id_usuario']."'  class='text4' ><img src='".DIRECTORIOIMAUSU.$foto."'  class='imagen_marco3' width='35' align='left' ></a></td><td><span class='text3'>".$row['nombre_usuario']."</span><br><input type='checkbox' name='a".$row['id_usuario']."' value='si'></div></td></tr></table></td>";
		}}
		if($total_amigos_lim==0 ){echo "<p align='center' class='text2' >".$GEN334[$_SESSION['idioma']]."</p>";}
	?></tr></table>
	</td></tr>
	<tr><td class='text3' ><span class='text'><?=$MENA[$_SESSION[idioma]]?>:</span></td><td><input type='text' name='asuntoinvita' value='Ha sido invitado a asistir al evento &quot;<?=$row2['titulo_evento']?>&quot;'   class='form1'  size='74' readonly=readonly></td></tr>
	<tr><td class='text3' valign='top' ><span class='text'><?=$MENM[$_SESSION[idioma]]?>:</span></td><td><textarea  name='mensajeinvita' class='form1' cols='70' rows='7'   ><?=$mensajeinvita?></textarea></td></tr>
    <tr><td colspan='2' align='right' ><input type='submit' name='Evento' value='<?=$GEN3[$_SESSION[idioma]]?>' class='boton2'  ></td></tr>
	</table>
</td></tr>
</table>
</div>

<div id="invitatodo" style="z-index:5; position:absolute; width:2000; height:1500; left: 0%; top: 0%; background-color:#000000; opacity:.5; filter:alpha(opacity=50); -moz-opacity: 0.5; display:none;"></div>
<div id="invitatodo2" style="z-index:6; position:absolute; width:50%; height:50%; left:42%; top:24%; display:none; ">
<table bgcolor="#FFFFFF" width="40%" height="50%" cellpadding="0" cellspacing="0">
<tr bgcolor="#B9EEEE" bordercolor="#B9EEEE"><td width="80%" height="1%"><span class='text'>&nbsp;Todos Mis Amigos</span></td><td width="20%" height="1%" align="right"><span class='text' ><a onClick="invitatodocierra()">X&nbsp;</a></span></td></tr>
<tr><td height="99%" colspan="2">
	<table> 
	<tr><td colspan="2">
	<table align="center">
	<?php 
	$miconexion->consulta($consulta="SELECT * FROM usuarios INNER JOIN amigos ON (id_usuario = id_amigo_solicitado )WHERE   ( id_amigo_solicita ='".$_SESSION['id']."' ) AND valida_amigo='si'AND estado_usuario = 'activo' ORDER BY  fecha_actualizacion_abopro DESC");
    if( $miconexion->numregistros() > 0 ){
		}
 	$total_amigos_lim = 0;	
	while ($row = mysql_fetch_array($miconexion->Consulta_ID)){
 	$miconexion2->consulta($consulta="SELECT * FROM usuarios INNER JOIN amigos ON (id_usuario = id_amigo_solicitado )WHERE   ( id_amigo_solicita ='".$row['id_usuario']."' )AND ( id_amigo_solicitado = ".$_SESSION['id']." )  AND valida_amigo='si' AND estado_usuario = 'activo'  ORDER BY  fecha_actualizacion_amigo DESC");
	if ($row11 = mysql_fetch_array($miconexion2->Consulta_ID)){
	    $total_amigos_lim = $total_amigos_lim +1;
		if(empty($row['foto_abopro'])){$foto = USUSINFOTO;}else{ $foto = $row['foto_abopro'];}
		echo "<tr><td><table><tr><td><div class='ajustar_div'  ><a href='index.php?asu=6&id=".$row['id_usuario']."'  class='text4' ><img src='".DIRECTORIOIMAUSU.$foto."'  class='imagen_marco3' width='35' align='left' ></a></td><td><span class='text3'>".$row['nombre_usuario']."</span><br><input type='checkbox' name='a".$row['id_usuario']."' value='si'></div></td></tr></table></td></tr>";
		}}
		if($total_amigos_lim==0 ){echo "<p align='center' class='text2' >".$GEN334[$_SESSION['idioma']]."</p>";}
	?></table>
	</td></tr>
	</table>
</td></tr>
</table></form>
</div>

[quimfv]

Yo no repetiria nombres....usaria prefijos....

Supongamos que tenemos

<div z-index=2>
<input name="z2chkbox1" type="checkbox" id="z2chkbox1" value="">
<input name="z2chkbox2" type="checkbox" id="z2chkbox2" value="">
<input name="z2chkbox3" type="checkbox" id="z2chkbox3" value="">
<input name="z2chkbox4" type="checkbox" id="z2chkbox4" value="">

<div z-index=3>
<input name="chkbox1" type="checkbox" id="chkbox1" onClick="cambia(this)" value="">
<input name="chkbox2" type="checkbox" id="chkbox2" onClick="cambia(this)" value="">
<input name="chkbox3" type="checkbox" id="chkbox3" onClick="cambia(this)" value="">
<input name="chkbox4" type="checkbox" id="chkbox4" onClick="cambia(this)" value="">
...


luego puedes hacer

Código js:

function cambia(obj){
    if (obj.checked){
        document.getElementById("z2"+obj.id).checked=true;
    }else{
        document.getElementById("z2"+obj.id).checked=false;
    }
}
 

Simple...

Quim

[kikeking1]

Vale perfecto, funciona correctamente, pero ahora tengo otro problema a raiz de esta solucion xD, Que necesito que el efecto funcione en las dos direcciones. Es decir ahora mismo marco los de z-index3 y se me marcan los de z-index2, y es muy sencillito con el tema de los prefijos. pero el caos se me produce cuando intento hacerlo alrevez (que marque z-index2 y se reflejen en z-index3) y ahora pues me surge un problema con el prefijo. tengo que quitarlo para hacer la funcion alrevez, probe con substring, para eliminar el primer caracter (le meti un prefijo de una letra), pero no me hace correctamente, y tengo duda de si realmente puedo hacer substring al nombre del objeto o solo sirve para las cadenas de texto.

Gracias de nuevo, me estais (o estas, mejor dicho por ahora .xD) ayudando mucho.

[quimfv]

Código js:

function cambia(obj){
      var equivalente="";
        if(obj.id.substr(0,2)=="z2"){
            equivalente=obj.id.substr(2,obj.id.length-2);
        }else{
            equivalente="z2"+obj.id;
        }
          if (obj.checked){
              document.getElementById(equivalente).checked=true;
          }else{
              document.getElementById(equivalente).checked=false;
          }
      }
 

Si?

Quim

[kikeking1]

Me quito el sombrero y hago una reverencia, Bravo!

Explendido. Muchas gracias de nuevo, es mas o menos el planteamiento que intente con el substr. pero no me tiraba (no hacia lo del length-2) ahora va perfecto y crea el efecto estetico que tanto andaba buscando. Gracias de nuevo :D