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
  • Autor do tópico
  • 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
  • Autor do tópico
  • 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
  • Autor do tópico
  • 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

    ×