ocultar/exibir div

Davi De Freitas · 23 de fevereiro de 2017

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>
1 <input type="checkbox" class="checkbox" value="1"><br />
2 <input type="checkbox" class="checkbox" value="2"><br />
3 <input type="checkbox" class="checkbox" value="3"><br />
4 <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>

JonathanMMachado · 23 de fevereiro de 2017

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.

Davi De Freitas · 23 de fevereiro de 2017

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.

JonathanMMachado · 23 de fevereiro de 2017

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>

DiF · 23 de fevereiro de 2017

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

Deixando desta maneira

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

Davi De Freitas · 24 de fevereiro de 2017

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.

DiF · 24 de fevereiro de 2017

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

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

Davi De Freitas · 25 de fevereiro de 2017

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.