Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Daniel Ribeiro

[Resolvido] Display: block - ao dar check no radio button

Por , em Javascript

Recommended Posts

Daniel Ribeiro    4

Daniel Ribeiro
Postado

Oi gente! Tudo bem?

 

É o seguinte, eu tenho uma estrutura mais ou menos assim:

 

<form action="" method="">
<input type="radio" name="item" id="item_1" />
 <div id="publicacoes_item_1">
 <input type="checkbox" name="item_1" id="pub_1" />
 <input type="checkbox" name="item_1" id="pub_2" />
 <input type="checkbox" name="item_1" id="pub_3" />
 <input type="checkbox" name="item_1" id="pub_4" />
 </div>
<input type="radio" name="item" id="item_2" />
 <div id="publicacoes_item_2">
 <input type="checkbox" name="item_1" id="pub_1" />
 <input type="checkbox" name="item_1" id="pub_2" />
 <input type="checkbox" name="item_1" id="pub_3" />
 <input type="checkbox" name="item_1" id="pub_4" />
 </div>
</form>

Eu gostaria de dar um display: block na div correspondente ao radio button selecionado, entendem?

 

A princípio as divs estarão escondidas. Ao clicar no radio 1, por exemplo, as checkbox correspondentes a ele apareceriam.

 

Como faço esse javascript?

 

Acabei de fazer em javascript uma função que dá o display: block.

 

<script type="" language="javascript">
 function verificaCheckButton(id) {
 if(document.getElementById(id).checked) {
 document.getElementById('publicacoes_' + id).style.display = 'block';
 }
</script>

Resta agora fazer a função pra esconder de novo se trocar de radio button. Como devo proceder?

Compartilhar este post

Link para o post
Compartilhar em outros sites

GabrielFerrari    41

GabrielFerrari
Postado

crie um else para o caso dele não estar marcado

 

if(document.getElementById(id).checked) {
 document.getElementById('publicacoes_' + id).style.display = 'block';
}else{
document.getElementById('publicacoes_' + id).style.display = 'none';
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Você não deve repetir IDs:

 

<input type="checkbox" name="item_1" id="pub_1" />

[...]
 <input type="checkbox" name="item_1" id="pub_1" />

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel Ribeiro    4

Daniel Ribeiro
Postado

crie um else para o caso dele não estar marcado

 

if(document.getElementById(id).checked) {
 document.getElementById('publicacoes_' + id).style.display = 'block';
}else{
document.getElementById('publicacoes_' + id).style.display = 'none';
}

 

Já tentei, não funciona =/

 

Você não deve repetir IDs:

 

<input type="checkbox" name="item_1" id="pub_1" />

[...]
 <input type="checkbox" name="item_1" id="pub_1" />

Onde você viu isso exatamente?

Compartilhar este post

Link para o post
Compartilhar em outros sites

GabrielFerrari    41

GabrielFerrari
Postado

Onde você viu isso exatamente?

 

<form action="" method="">

<input type="radio" name="item" id="item_1" />

<div id="publicacoes_item_1">

<input type="checkbox" name="item_1" id="pub_1" />

<input type="checkbox" name="item_1" id="pub_2" />

<input type="checkbox" name="item_1" id="pub_3" />

<input type="checkbox" name="item_1" id="pub_4" />

</div>

<input type="radio" name="item" id="item_2" />

<div id="publicacoes_item_2">

<input type="checkbox" name="item_1" id="pub_1" />

<input type="checkbox" name="item_1" id="pub_2" />

<input type="checkbox" name="item_1" id="pub_3" />

<input type="checkbox" name="item_1" id="pub_4" />

</div>

</form>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Exemplo:

<html>
<head>
<script type="text/javascript">
function id( el ){
        return document.getElementById( el );//apenas apelido para simplificar as chamadas
}
window.onload = function()
{
	id('f_item_1').style.display = 'none';//começar escondendo
	id('f_item_2').style.display = 'none';//começar escondendo
	
	
	id('item_1').onclick = function(){
		show_f( this );
	}
	id('item_2').onclick = function(){
		show_f( this );
	}
}
function show_f( el )
{
	id( 'f_'+el.id ).style.display = 'block';
}
</script>
</head>
<body>
	<form action="" method="">
		Item 1: <input type="radio" name="item" id="item_1" />
		<fieldset id="f_item_1">
			<input type="checkbox" name="item_1" />
			<input type="checkbox" name="item_1" />
			<input type="checkbox" name="item_1" />
			<input type="checkbox" name="item_1" />
		</fieldset>
		
		
		<br />
		Item 2: <input type="radio" name="item" id="item_2" />
		<fieldset id="f_item_2">
			<input type="checkbox" name="item_1" />
			<input type="checkbox" name="item_1" />
			<input type="checkbox" name="item_1" />
			<input type="checkbox" name="item_1" />
		</fieldset>
	</form>
</body>
</html>

edit:

Alteração para esconder os outros fieldsets:

function show_f( el )
{
	hide();
	id( 'f_'+el.id ).style.display = 'block';
}
function hide()
{
	var fields = document.getElementsByTagName('fieldset');
	for( var i=0; i<fields.length; i++ )
	{
		fields[i].style.display = 'none';
	}
}
toma cuidado com a marcação HTML... ai eu to escondendo todos os fieldsets do documento... ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel Ribeiro    4

Daniel Ribeiro
Postado

William, obrigado por enviar um código. Eu já consegui uma solução, lá no serviço mesmo.

 

Mas vou ver como está o seu pra pegar algumas ideias.

 

Abraços, dúvida resolvida.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Poste como você resolveu, pois pode ajudar outro usuário.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel Ribeiro    4

Daniel Ribeiro
Postado

Poste como você resolveu, pois pode ajudar outro usuário.

 

Infelizmente não tenho como fazer isso no momento, pois o resultado ficou na empresa.

 

Segunda-feira à tarde eu postarei aqui mesmo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel Ribeiro    4

Daniel Ribeiro
Postado 

function verifyCheckButton(id) {
 for(var i = 1; i <= document.formCadExportacao.item.length; i++) {
	if(document.formCadExportacao.item[i - 1].checked && document.formCadExportacao.item[i - 1].value == 'item_' + id) {
 	document.getElementById('publicacoes_item_' + i).style.display = 'block';
	} else {
 	document.getElementById('publicacoes_item_' + i).style.display = 'none';
 	for(var x = 0; x < document.getElementsByName('item_' + i).length; x++) {
 	document.getElementsByName('item_' + i)[x].checked = false;
 	}
	}
 } 			
}

Resolvido.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito