! Habilitando e desabilitando campos

ivonaldotorres · Junho 18, 2008

CODE

Galera como faço para ocultar todos meus checkboxs e seus respequitivos label´s, com a escolha 

de um radiobutton. Esse abaixo é o código teste que estou tentando incrementar, só oculta um checkbox sem ocultar seu lebel,

pois queria que ocultasse todos os label´s e checkbox ao clicar do radiobutton.

Visto que estou e desenvolvendo em PHP, mas estou tentando validar em javascript, não sei se é o melhor

Sem mais, fico muito grato por quem possa me ajudar!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<script type="text/javascript">

function Visibility(idElement)

{

var element = document.getElementById(idElement);

var visibility = {

hidden: function $hidden()

{

element.style.visibility = 'hidden';

},

visible: function $visible()

{

element.style.visibility = 'visible';

}

} 

return {

Toggle: function()

{

visibility[element.style.visibility == 'hidden'? 'visible': 'hidden']();

}

} 

}

window.onload = function()

{

document.getElementById('RadioGroup1').onclick = Visibility('check[]').Toggle;

}

</script>

</head>

<body><form action="" method="post">

<p>

<br />

</p>

<table width="60%" border="1">

<tr>

<td><label>

<input type="radio" name="RadioGroup1" value="sim" />

Sim</label>

<br />

<label>

<input type="radio" name="RadioGroup1" value="nao" />

Não</label>

 </td>

<td><label>

<input type="checkbox" name="check[]" value="checkbox" />

teste1<br />

<input type="checkbox" name="check[]" value="checkbox" />

teste2<br />

<input type="checkbox" name="check[]" value="checkbox" />

teste3</label></td>

</tr>

</table>

</form>

</body>

</html>

Alaerte Gabriel · Junho 18, 2008

Não tem nada ver com PHP, isso é JS.

Movido: PHP http://forum.imasters.com.br/public/style_emoticons/default/seta.gif JavaScript/DHTML

Dieguinhu Web · Junho 18, 2008

Cara primeiro não use visibility

Use display

aí você faz a função display:"none" pra ocultar seus itens

e display:"block" pra exibir seus itens é bem mais viável

abraço

klaygomes · Junho 18, 2008

Não sei se é você que esta com sorte ou eu que não...

Hoje precisei fazer algo parecido, olha o resultado:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	<title>Untitled Document</title>
 
	<script type="text/javascript">

	var frm = {};

	frm.cacheInputs = [];

	frm.Visibility = function $Visibility(Element)

	{

		var _element;		

		if(typeof(Element) === 'object')

		{

			_element = Element;

		}

		else

		{

			_element = document.getElementById(Element) || document.getElementsByName(Element)[0];

		}

		return {

				Toggle: function(){

				//Altere conforme sua ncessidade

				//_element.style.display = (_element.style.display == 'none'? '': 'none');

				_element.style.visibility = (_element.style.visibility == 'hidden'? 'visible': 'hidden');

				}

			}

	}
 
	frm.getInputs = function $getInputs(groupName)

	{

		var returnValue = frm.cacheInputs[groupName];

		if(!returnValue)

		{

			frm.cacheInputs[groupName] = [];

			var checks = document.getElementsByTagName('input');

			for(var x in checks)

			{

				if(checks[x].type === 'checkbox' && checks[x].name.indexOf(groupName) > -1)

				{

					frm.cacheInputs[groupName].push(checks[x]);

				}			

			}

			returnValue = frm.cacheInputs[groupName];

		}
 
		return returnValue;	

	}
 
	frm.Visibility.ToggleGroup = function $ToggleGroup(groupName)

	{

		var inputs = frm.getInputs(groupName);

		for(var x = 1;x <inputs.length; x++)

		{

			frm.Visibility(inputs[x].parentNode).Toggle();

		}

	}
 
	</script>
 
</head>

<body>

	<form action="" method="post">

		<p>

			<br />

		</p>

		<table width="60%" border="1">

			<tr>

				<td>

					<label>

					Sim/Não

						 <input type="checkbox" name="RadioGroup1[0]" id="RadioGroup1" onclick="frm.Visibility.ToggleGroup(this.id); return true" value="checkbox" checked="checked" />

					 </label>

					<br />
 
					 </td>

				<td>

					<label for="RadioGroup1[1]">

						<input type="checkbox" name="RadioGroup1[1]" value="checkbox" />

						teste1<br />

					</label>

					<label  for="RadioGroup1[2]">

						<input type="checkbox" name="RadioGroup1[2]" value="checkbox" />

						teste2<br />

					</label>

					<label for="RadioGroup1[3]">

						<input type="checkbox" name="RadioGroup1[3]" value="checkbox" />

						teste3
 
					</label>

						</td>

			</tr>

		</table>

	</form>

</body>

</html>

Acho que o script é auto explicativo, qualquer dúvida só perguntar, abraços.

ivonaldotorres · Junho 19, 2008

Ainda estou precisando de ajuda

Cara valeu mesmo!!! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif era exatamente isso q eu estava kerendo, brigadão memso!!! mais...

Eu tenho varias perguntas no meu form, eu colokei mais duas de exemplo, com cheks e caixa de texo queria q ele aparecesse

quando eu clicasse no seu respequitivo checkbox, em que propriedade do script eu mexo, pq revirei todo o codigo e nao encontrei.

Mais outra pergunta, posso mudar o name dos campos pois preciso inseri-los no meu banco, pois quando mudei-os eles nao funcionaram(aparecer e desaparecer).

Estou mandando ocodigo com os dois campos a mais.

Muito obrigado pela ajuda!!!

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
 
    <script type="text/javascript">
    var frm = {};
    frm.cacheInputs = [];
    frm.Visibility = function $Visibility(Element)
    {
        var _element;        
        if(typeof(Element) === 'object')
        {
            _element = Element;
        }
        else
        {
            _element = document.getElementById(Element) || document.getElementsByName(Element)[0];
        }
        return {
                Toggle: function(){
                //Altere conforme sua ncessidade
                _element.style.display = (_element.style.display == 'none'? '': 'none');
                //_element.style.visibility = (_element.style.visibility == 'hidden'? 'visible': 'hidden');
                }
            }
    }
 
    frm.getInputs = function $getInputs(groupName)
    {
        var returnValue = frm.cacheInputs[groupName];
        if(!returnValue)
        {
            frm.cacheInputs[groupName] = [];
            var checks = document.getElementsByTagName('input');
            for(var x in checks)
            {
                if(checks[x].type === 'checkbox' && checks[x].name.indexOf(groupName) > -1)
                {
                    frm.cacheInputs[groupName].push(checks[x]);
                }            
            }
            returnValue = frm.cacheInputs[groupName];
        }
 
        return returnValue;    
    }
 
    frm.Visibility.ToggleGroup = function $ToggleGroup(groupName)
    {
        var inputs = frm.getInputs(groupName);
        for(var x = 1;x <inputs.length; x++)
        {
            frm.Visibility(inputs[x].parentNode).Toggle();
        }
    }
 
 
 
 
    </script>
 
</head>
<body>
    <form action="" method="post">
        <p>
            <br />
        </p>
        <table width="60%" border="1">
            <tr>
                <td>
                    <label>
                    Sim/Não
                         <input type="checkbox" name="RadioGroup1[0]" id="RadioGroup1" onclick="frm.Visibility.ToggleGroup(this.id); return true" value="checkbox" checked="checked" />
                  </label>
                    <br />
 
                     </td>
                <td>
                    <label for="RadioGroup1[1]">
                        <input type="checkbox" name="RadioGroup1[1]" value="checkbox" />
                        teste1<br />
                    </label>
                    <label  for="RadioGroup1[2]">
                        <input type="checkbox" name="RadioGroup1[2]" value="checkbox" />
                        teste2<br />
                    </label>
                    <label for="RadioGroup1[3]">
                        <input type="checkbox" name="RadioGroup1[3]" value="checkbox" />
                        teste3
 
 
                    </label>
              </td>
            </tr>
        </table>
        <table width="60%" border="1">
          <tr>
            <td><label> Sim/Não
              <input type="checkbox" name="RadioGroup1[1]" id="RadioGroup1[0]" onclick="frm.Visibility.ToggleGroup(this.id); return true" value="checkbox" checked="checked" />
              </label>
                <br />
               </td>
            <td><label for="RadioGroup1[4]">
              <input type="checkbox" name="RadioGroup1[1]" value="checkbox" />
              teste1<br />
              </label>
                <label  for="RadioGroup1[5]">
                <input type="checkbox" name="RadioGroup1[2]" value="checkbox" />
                  teste2<br />
                </label>
                <label for="RadioGroup1[6]">
                <input type="checkbox" name="RadioGroup1[3]" value="checkbox" />
                  teste3 </label>
            </td>
          </tr>
        </table>
        <table width="60%" border="1">
          <tr>
            <td width="56%"><label> Sim/Não
              <input type="checkbox" name="RadioGroup1[0]2" id="RadioGroup1[0]2" onclick="frm.Visibility.ToggleGroup(this.id); return true" value="checkbox" checked="checked" />
              </label>
                <br />
             </td>
            <td width="44%"><label for="RadioGroup1[1]"></label>
              <label>teste
              <input type="text" name="textfield" />
            </label></td>
          </tr>
        </table>
        <p> </p>
        <p> </p>
    </form>
</body>
</html>

klaygomes · Junho 20, 2008

Eu tive que refatorar o código, inclui algumas alterações que vão permitir o que você deseja fazer.

Para que funcione ai com você, preste muita atenção no padrão de nomeclatura das IDs.

*O checkbox terá que ter o nome do grupo, e os filhos além do nome do grupo um [n] ao final (onde N é o index que aparecerá na página*

*Este comportamento pode ser mudado facilmente

Abaixo segue o código:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <title>Forum Imasters</title>

    <script type="text/javascript">

        var frm = {

	        cacheItens : [],

	        Visibility : function $Visibility(Element) {

		        var _element;

		        if(typeof(Element) === 'object'){

		        _element = Element;

		        }

		        else{

			        _element = document.getElementById(Element) || document.getElementsByName(Element)[0];

		        }

		        return {

				        Toggle: function(){

							        if(_element)

							        {

								        //Altere conforme sua ncessidade

								        //_element.style.display = (_element.style.display == 'none'? '': 'none');

								        _element.style.visibility = (_element.style.visibility == 'hidden'? 'visible': 'hidden');
 
								        //Evita que os dados sejam enviados para o servidor 

								        //caso os campos estejam escondidos

								        _element.disabled = _element.disabled === false;

							        }

						        }

			        }

	        },

	        getItens : function $getNodesByTagName(group, tag){

		        var returnValue = frm.cacheItens[group];

			        if(!returnValue)

				        {

					        this.cacheItens[group] = [];

					        tag = tag !== undefined? tag: 'input';

					        var checks = document.getElementsByTagName(tag);

					        for(var x in checks)

					        {

						        if(checks[x].name && checks[x].name.indexOf(group) > -1)

						        {

							        this.cacheItens[group].push(checks[x]);

						        }

					        }

					        returnValue = this.cacheItens[group];

				        }

		        return returnValue;

	        }

        };
 
        //Extends

        frm.Visibility.ToggleGroup = function $ToggleGroup(groupName)

        {

	        var inputs = frm.getItens(groupName);

	        for(var x = 1;x <inputs.length; x++)

	        {

		        frm.Visibility(inputs[x].parentNode).Toggle();

	        }

        }

    </script>

</head>

<body>

    <form action="" method="post">

        <p>

            <br />

        </p>

        <table width="60%" border="1">

            <tr>

                <td>

                    <label>

                        Sim/Não

                        <input type="checkbox" name="RadioGroup1[0]" id="RadioGroup1" onclick="frm.Visibility.ToggleGroup(this.id); return true"

                            value="checkbox" checked="checked" />

                    </label>

                    <br />

                     </td>

                <td>

                    <label for="RadioGroup1[1]">

                        <input type="checkbox" name="RadioGroup1[1]" value="checkbox" />

                        teste1<br />

                    </label>

                    <label for="RadioGroup1[2]">

                        <input type="checkbox" name="RadioGroup1[2]" value="checkbox" />

                        teste2<br />

                    </label>

                    <label for="RadioGroup1[3]">

                        <input type="checkbox" name="RadioGroup1[3]" value="checkbox" />

                        teste3

                    </label>

                </td>

            </tr>

        </table>

        <table width="60%" border="1">

            <tr>

                <td>

                    <label>

                        Sim/Não

                        <input type="checkbox" name="RadioGroup2[0]" id="RadioGroup2" onclick="frm.Visibility.ToggleGroup(this.id); return true"

                            value="checkbox" checked="checked" />

                    </label>

                    <br />

                     </td>

                <td>

                    <label for="RadioGroup2[1]">

                        <input type="checkbox" name="RadioGroup2[1]" value="checkbox" />

                        teste1<br />

                    </label>

                    <label for="RadioGroup2[2]">

                        <input type="checkbox" name="RadioGroup2[2]" value="checkbox" />

                        teste2<br />

                    </label>

                    <label for="RadioGroup2[3]">

                        <input type="checkbox" name="RadioGroup2[3]" value="checkbox" />

                        teste3

                    </label>

                </td>

            </tr>

        </table>

        <table width="60%" border="1">

            <tr>

                <td width="56%">

                    <label>

                        Sim/Não

                        <input type="checkbox" name="RadioGroup3[0]" id="RadioGroup3" onclick="frm.Visibility.ToggleGroup(this.id); return true"

                            value="checkbox" checked="checked" />

                    </label>

                    <br />

                     </td>

                <td width="44%">

                    <label for="RadioGroup3[1]">

                    </label>

                    <label>

                        teste

                        <input type="text" name="RadioGroup3[1]" />

                    </label>

                </td>

            </tr>

        </table>

        <p>

             </p>

        <p>

             </p>

    </form>

</body>

</html>

Abraços

ivonaldotorres · Junho 22, 2008

Brother valeu mesmo, vou testar no meu projeto, vou ver se consigo inserir os campos no BD, Brigadão...

Valeu a atençaõ

ivonaldotorres · Junho 23, 2008

Estou conseguindo iserir no meu banco, legal, agora eu tenho campos q deveria não aparecer no carregamento da página, só quando fosse checkado o checkbox ai ele apareceria,já tentei colocar no onload da pagina, onde o checkbox receberia um valor>-1, já inserie no javascript o check recebendo valo>-1 e nada e ainda inserie um combo e não estou conseguindo faze-lo sumir tambem no mesmo evento do carregamento da pagina. Como eu conseguiria isso no mesmo código teste q você me enviou.

Valeu a ajuda mesmo estou aprendendo bem JS com sua ajuda.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Forum Imasters</title>

var frm = {

cacheItens : [],

Visibility : function $Visibility(Element) {

var _element;

if(typeof(Element) === 'object'){

_element = Element;

}

else{

_element = document.getElementById(Element) || document.getElementsByName(Element)[0];

}

return {

Toggle: function(){

if(_element)

{

//Altere conforme sua ncessidade

//_element.style.display = (_element.style.display == 'none'? '': 'none');

_element.style.visibility = (_element.style.visibility == 'hidden'? 'visible': 'hidden');

//Evita que os dados sejam enviados para o servidor

//caso os campos estejam escondidos

_element.disabled = _element.disabled === false;

}

},getItens : function $getNodesByTagName(group, tag){

var returnValue = frm.cacheItens[group];

if(!returnValue)

{

this.cacheItens[group] = [];

tag = tag !== undefined? tag: 'input';

var checks = document.getElementsByTagName(tag);

for(var x in checks)

{

if(checks[x].name && checks[x].name.indexOf(group) > -1)

{

this.cacheItens[group].push(checks[x]);

}

returnValue = this.cacheItens[group];

}

return returnValue;

}

};

//Extends

frm.Visibility.ToggleGroup = function $ToggleGroup(groupName)

{

var inputs = frm.getItens(groupName);

for(var x = 1;x <inputs.length; x++)

{

frm.Visibility(inputs[x].parentNode).Toggle();

}

</script>

</head>

<p>

<br />

</p>

<tr>

<td>

<label>

Sim/Não

<input type="checkbox" name="RadioGroup1[0]" id="RadioGroup1" onclick="frm.Visibility.ToggleGroup(this.id); return true"

value="checkbox" />

</label>

<br />

</td>

<td >

teste1<br />

</label>

teste2<br />

</label>

teste3

</label>

</td>

</tr>

</table>

<tr>

<td>

<label>

Sim/Não

<input type="checkbox" name="RadioGroup2[0]" id="RadioGroup2" onclick="frm.Visibility.ToggleGroup(this.id); return true"

value="checkbox" checked="checked" />

</label>

<br />

</td>

<td>

teste1<br />

</label>

teste2<br />

</label>

teste3

</label>

</td>

</tr>

</table>

<tr>

<label>

Sim/Não

<input type="checkbox" name="RadioGroup3[0]" id="RadioGroup3" onclick="frm.Visibility.ToggleGroup(this.id); return true"

value="checkbox" checked="checked" />

</label>

<br />

</td>

</label>

<label>

teste

<br />

</label>

<p>

<label for="RadioGroup3[2]">teste2

</label>

<label>

</select>

</label>

</p>

</label>

<label>teste3

</label>

</p></td>

</tr>

</table>

<p>

</p>

<p>

</p>

</form>

</body>

</html>

Arquivado

! Habilitando e desabilitando campos

Recommended Posts

ivonaldotorres 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alaerte Gabriel 662

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dieguinhu Web 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klaygomes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ivonaldotorres 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klaygomes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ivonaldotorres 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ivonaldotorres 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Fóruns

Tempo Real

Informação importante