Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Davi De Freitas

ocultar/exibir div

Recommended Posts

Olá, será que alguém de vocês poderia me ajudar ???

estou tentando fazer 4 checkbox horizontal, com as div oculta, e mostrar as div só quando clicar, ate ai eu consegui.

Agora preciso que quando "checkar" outra box, a anterior "checkada" feche e mostre a que foi "checkada" por ultimo. podem me ajudar ? segue todo o código.

http://pastebin.com/9MFjFkku

<!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=utf-8" />
<title>Documento sem título</title>
<!-- precisa do arquivo a baixo, baixado. -->
<script src="jquery-1.3.2.min.js"></script>
<script src="teste/jquery-1.3.2.min.js"></script>
<style>
/* ESCONDE TODAS AS DIVS */
.divs{display:none;}
</style>
<script>
$(document).ready(function() {
// QUANDO CHECKBOX É CHECADO
$('.checkbox').click(function() {
// ESCONDE TODAS AS DIVS
$('.divs').hide();
// PEGA CADA CHECKBOX
$('.checkbox:checked').each(function() {
// PEGA O VALOR DO CHECKBOX, E ADICIONA AO D DA DIV
// D1, D2, ....
$('#d'+$(this).val()).show();
// FIM DO EACH
});
// FIM DO CLICK
});
// FIM DO READY
});
</script>
<form><input type="checkbox" class="checkbox" value="1"><br /><input type="checkbox" class="checkbox" value="2"><br /><input type="checkbox" class="checkbox" value="3"><br /><input type="checkbox" class="checkbox" value="4"><br />
</form>
<div class="divs" id="d1">div1</div>
<div class="divs" id="d2">div2</div>
<div class="divs" id="d3">div3</div>
<div class="divs" id="d4">div4</div>

 

Editado por DiF
Botão CODE <>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Dica: Quando for postar código, utilize a opção <>.

 

Acredito que como coloquei em baixo irá funcionar. (não testei, qualquer dúvida só perguntar).


		$(document).ready(function() {
			// QUANDO CHECKBOX É CHECADO
			$('.checkbox').click(function() {
				// ESCONDE TODAS AS DIVS
				$('.divs').hide();
				// PEGA CADA CHECKBOX
				$('#d'+$(this).val()).show();
				// FIM DO CLICK
			});
			// FIM DO READY
		});

 

Se você quer que todas as anteriores sejam "escondidas" e apenas que foi clicada apareça, não há porque fazer o looping por todas as selecionadas.

Editado por JonathanMMachado

Compartilhar este post


Link para o post
Compartilhar em outros sites
 
3 horas atrás, JonathanMMachado disse:

Dica: Quando for postar código, utilize a opção <>.

 

Acredito que como coloquei em baixo irá funcionar. (não testei, qualquer dúvida só perguntar).



		$(document).ready(function() {
			// QUANDO CHECKBOX É CHECADO
			$('.checkbox').click(function() {
				// ESCONDE TODAS AS DIVS
				$('.divs').hide();
				// PEGA CADA CHECKBOX
				$('#d'+$(this).val()).show();
				// FIM DO CLICK
			});
			// FIM DO READY
		});

 

a sim, tudo bem, obrigado pelo feedback.

ta quase funcionando, agora o que acontece e que ao da "run" no código, ao carregar a pagina mostra todas as div, e no caso era pra carregar em oculto, só então depois de "checkar" uma box ele exibir a div selecionada.

também, se for possível, ao clicar em outra "checkbox", desmarcar outras. da maneira que esta, se eu clicar em alguma "checkbox", aparece a  div marcada, mas com 2  ou mais que eu marcar, marcada.

ficar só 1 "checkbox" marcado.

Desde já agradeço pela ajuda, fico muito agradecido.

Editado por DiF
Retirar o texto de resposta de dentro da citação

Compartilhar este post


Link para o post
Compartilhar em outros sites
17 minutos atrás, Davi De Freitas disse:

também, se for possível, ao clicar em outra "checkbox", desmarcar outras. da maneira que esta, se eu clicar em alguma "checkbox", aparece a  div marcada, mas com 2  ou mais que eu marcar, marcada.

ficar só 1 "checkbox" marcado.

O que você tá procurando não é checkbox então, e sim radio buttons.

 

Seu html e javascript ficaria mais ou menos assim:

<!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=utf-8" />
	<title>Documento sem título</title>
	<!-- precisa do arquivo a baixo, baixado. -->
	<script src="jquery-1.3.2.min.js"></script>
	<script src="teste/jquery-1.3.2.min.js"></script>
    <style>
		/* ESCONDE TODAS AS DIVS */
		.divs{
			display:none;
		}
	</style>
	<script>
		$(document).ready(function() {
			$('.inputRadio').click(function() {
				showDiv("#" + $(this).val());
			});
		});

		function showDiv(element){
			hideAllDiv();
			$(element).show();
		}

		function hideAllDiv(){
			$('.divs').hide();
		}
</script>
<form>
	1 <input type="radio" class="inputRadio" name="inputRadio" value="d1"><br />
	2 <input type="radio" class="inputRadio" name="inputRadio" value="d2"><br />
	3 <input type="radio" class="inputRadio" name="inputRadio" value="d3"><br />
	4 <input type="radio" class="inputRadio" name="inputRadio" value="d4"><br />
</form>
<div class="divs" id="d1">div1</div>
<div class="divs" id="d2">div2</div>
<div class="divs" id="d3">div3</div>
<div class="divs" id="d4">div4</div>

 

  • Curtir 2

Compartilhar este post


Link para o post
Compartilhar em outros sites

@JonathanMMachado Ótima resposta.   Só recomendo trocar  o evento de click,  por ON()  

Deixando desta maneira

	$('.inputRadio').on('click',function() {
			showDiv("#" + $(this).val());
		});
	});

 

  • Curtir 2

Compartilhar este post


Link para o post
Compartilhar em outros sites
 
7 horas atrás, DiF disse:

@JonathanMMachado Ótima resposta.   Só recomendo trocar  o evento de click,  por ON()  

Deixando desta maneira


	$('.inputRadio').on('click',function() {
			showDiv("#" + $(this).val());
		});
	});

 

Obrigado pela resposta, mas eu testei da maneira que escreveu e não funciona, não mostra o conteúdo.

Aproveitando, porque da recomendação ?

 

adicionado 1 minuto depois
10 horas atrás, JonathanMMachado disse:

O que você tá procurando não é checkbox então, e sim radio buttons.

 

Seu html e javascript ficaria mais ou menos assim:


<!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=utf-8" />
	<title>Documento sem título</title>
	<!-- precisa do arquivo a baixo, baixado. -->
	<script src="jquery-1.3.2.min.js"></script>
	<script src="teste/jquery-1.3.2.min.js"></script>
    <style>
		/* ESCONDE TODAS AS DIVS */
		.divs{
			display:none;
		}
	</style>
	<script>
		$(document).ready(function() {
			$('.inputRadio').click(function() {
				showDiv("#" + $(this).val());
			});
		});

		function showDiv(element){
			hideAllDiv();
			$(element).show();
		}

		function hideAllDiv(){
			$('.divs').hide();
		}
</script>
<form>
	1 <input type="radio" class="inputRadio" name="inputRadio" value="d1"><br />
	2 <input type="radio" class="inputRadio" name="inputRadio" value="d2"><br />
	3 <input type="radio" class="inputRadio" name="inputRadio" value="d3"><br />
	4 <input type="radio" class="inputRadio" name="inputRadio" value="d4"><br />
</form>
<div class="divs" id="d1">div1</div>
<div class="divs" id="d2">div2</div>
<div class="divs" id="d3">div3</div>
<div class="divs" id="d4">div4</div>

 

Muito bom, excelente resposta. Muito obrigado pela ajuda.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Davi De Freitas O código apresentado funciona corretamente. veja um exemplo online:

https://jsfiddle.net/dife/f5rofd9m/

Compartilhar este post


Link para o post
Compartilhar em outros sites
 
Em 23/02/2017 às 15:19, DiF disse:

@JonathanMMachado Ótima resposta.   Só recomendo trocar  o evento de click,  por ON()  

Deixando desta maneira


	$('.inputRadio').on('click',function() {
			showDiv("#" + $(this).val());
		});
	});

 

 

Em 24/02/2017 às 01:40, DiF disse:

@Davi De Freitas O código apresentado funciona corretamente. veja um exemplo online:

https://jsfiddle.net/dife/f5rofd9m/

realmente. mas porque trocar por .on('Click')?

sou bem leigo em js. Obrigado pela disposição.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Davi De Freitas Olá,  a função click,  age somente para um elemento.

A função on() manipula os eventos para um ou mais elementos.

O que é seu caso! 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário






Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×