Ocultar y hacer visible un campo

[kurika]

function mostrarOcultar(obj) {
document.getElementById('ip').style.visibility = (obj.checked) ? 'visible' : 'hidden';
}

<td align="center">
IP <input name="ver_ip" type="checkbox" onClick="mostrarOcultar(this)">
</td>

<td>
<input size="10" maxlength="20" style="visibility:hidden;" id="ip" name="ip1" type="text" value="<?php echo $canales['IP']; ?>" >
</td>
con la funcion de arriba cuando habilito el checkbox me aparece el campo o me desaparece hasta aqui correcto, el problema lo tengo porque el codigo lo tengo en un while que me devuelve mas de un registro entonces solo me muestra y me oculta el primero se puede hacer algo

Gracias

[Dafonz]

el problema esta en que agarras el elemento ById entonces pon dinamico esa "id" y puedes enviarle el parametro de cual se trata junto con el objeto del checkbox por ejemplo:

Código PHP:

<td align="center">
IP <input type="checkbox" onClick="mostrarOcultar(this,<? echo $algunvalorunicodetuconsulta.'_campo' ?>)">  
</td>
 
<td>
<input size="10" maxlength="20" style="visibility:hidden;" id="<? echo $algunvalorunicodetuconsulta.'_campo' ?>" type="text" value=" <?php echo $canales['IP']; ?>" >
</td>
 

entonces en el javascript

Código Javascript:

function mostrarOcultar(obj,campo) {
document.getElementById(campo).style.visibility = (obj.checked) ? 'visible' : 'hidden';
}
 

[kurika]

Ok gracias por la respuesta, pero la verdad es que necesitaria que me ocultara o mostrara todos los campos con esa ID se que debe ser unica pero lo que necesito es eso no que me oculte sino todos los campos de esa columna

Gracias

[Dafonz]

aa ok.. disculpa entonces entendí mal.. entonces simplemente puedes agarrar los elementos por su clase

Código Javascript:

document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};
 

por ejemplo esta función te regresa todos los elementos que tengan la misma clase (así puede ser repetida), entonces ya solo ciclas el array y pones visible o no segun sea a cada elemento.
O también puedes si es un form con los element y viendo los tipos, aunque me iría mas por la de la clase por si tiene mas input type=text o cosas así..

[kurika]

Te agredezco tu ayuda pero leo el codigo y me quedo igual podrias explicarme algo mas

Gracias

[Dafonz]

es que al ser id necesitan ser únicas.. lo que puedes hacer es ponerle class='' por ejemplo:

Código HTML:

<style>
 .invisible { visibility:hidden; }
</style>
<td>
<input size="10" maxlength="20" class='invisible' type="text" value="<?php echo $canales['IP']; ?>" >
</td>
 

(lo de style lo puse extra el punto es ponerle class='algo')

entonces cuando dispares el evento que oculta o pone visible todos los campos llamas esta funcion en vez de la que tienes pero mandandole tmb el nombre de la clase si la quieres usar para depsues: onClick="pruebaFuncion(this,'invisible')"

Código Javascript:

function pruebaFuncion(obj,cl) {
    var myclass = new RegExp('\\b'+cl+'\\b');
    var elem = document.getElementsByTagName('*');
    for (var i = 0; i < elem.length; i++) {
        var classes = elem[i].className;
        if (myclass.test(classes)) { elem[i].style.visibility =  (obj.checked) ? 'visible' : 'hidden'; }
    }
}
 

¿Que es lo que hace?
Pues sencillo.. a la hora que llamas la funcion le mandas el objeto de checkbox (como antes) y a parte el nombre de la clase que tienen tus input que quieres ocultar o mostrar ('invisible').. entonces primero selecciona los elementos de la pagina y los filtra por esa clase que enviaste después les pone la visibilidad segun sea el checkbox.. puede sonar reburujado y pues eso de sacar los elementos es otro ciclo extra pero si tienes mas input del mismo tipo es dificil seleccionar solo esos, es por eso que puse la clase como indicador.

[kurika]

Dentro de java

<SCRIPT LANGUAGE="JavaScript">
function pruebaFuncion(obj,cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) elem[i].style.visibility ? 'visible' : 'hidden';
}
}
</script>

Dentro del body

<style>
.invisible { visibility:hidden; }
</style>


Checkbox
IP <input name="ver_ip" type="checkbox" onClick="pruebaFuncion(this,'invisible')">

Campo que debe mostrar y ocultar

<td>
<input size="10" maxlength="20" class='invisible' name="ip1" type="text" value="<?php echo $canales['IP']; ?>" >
</td>

Algo no hago bien porque me aparecen ocultos pero no los muestra, no he querido cambiar nada por no cagarla

[Dafonz]

Lo acabo de probar y si funciona ahi te va:
Javascript

Código Javascript:

function pruebaFuncion(obj,cl) {
            var myclass = new RegExp('\\b'+cl+'\\b');
            var elem = document.getElementsByTagName('*');
            for (var i = 0; i < elem.length; i++) {
                var classes = elem[i].className;
                if (myclass.test(classes)) { elem[i].style.visibility =  (obj.checked) ? 'visible' : 'hidden'; }
            }
        }
 

Si tienes hoja de estilos o si quieres crearla dentro de la misma head o algo:

Código HTML:

<style>
.invisible { visibility:hidden; }
</style>
 

Checkbox
<input type="checkbox" onClick="pruebaFuncion(this,'invisible')" />

Campos: (los repeti a mano pero debe ser la misma en while)

Código HTML:

<input size="10" maxlength="20" class='invisible' type="text" value="Este SI" >
<input size="10" maxlength="20" class='invisible' type="text" value="Este SI" >
<input size="10" maxlength="20" class='invisible' type="text" value="Este SI" >
<input size="10" maxlength="20" class='invisible' type="text" value="Este SI" >
<input size="10" maxlength="20" class='invisible' type="text" value="Este SI" >
<input size="10" maxlength="20" class='invisible' type="text" value="Este SI" >
<input size="10" maxlength="20" type="text" value="Este NO" >
<input size="10" maxlength="20" class='invisible' type="text" value="Este SI" >
 

Los campos con class='Invisible' se ocultan, los demas no

[kurika]

Muchas, muchisimas gracias.

Solucionado

[kurika]

A ver si me sacas de la otra duda, el campo text lo tengo dentro de un TD y cierto es que el campo me lo oculta pero me reserva el espacio del td sabes si se podria hacer algo para que no reservara el espacio

Gracias

[Dafonz]

en vez de ponerle la clase al input ponle al td.. en si esa función te oculta cualquier elemento que tenga esa clase independientemente de su tipo. También te recomendaría que en vez de visibility uses la proiedad display
elem[i].style.display= (obj.checked) ? 'block' : 'none';

Esto para que no deje el espacio en la tabla, osea como un no se ve pero ahí esta..

[kurika]

Ahora si todo solucionado como bien dije antes

Muchisimas Gracias