Ir para conteúdo

POWERED BY:

Arquivado

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

vynnus

Ao marcar um checkbox mostrar o conteúdo e desmarcar o checkbox anteri

Por , em Javascript

Recommended Posts

vynnus    0

vynnus
Postado

Saudações,

 

tenho 3 checkboxes.

Quero que independente do checkbox que estiver marcado seja exibido somente o conteúdo da div referente aquele checkbox.

 

Na teoria:

Ao marcar o checkbox1 mostrar o conteúdo da div1.

Ao marcar o checkbox2 mostrar o conteúdo da div2 e esconder o conteúdo da div1.

Ao marcar o checkbox3 mostrar o conteúdo da div3 e esconder o conteúdo da div2.

 

Na prática tenho o código abaixo, mas não está funcionando.

Alguém me dê uma luz por favor ...

 


<html>
<head>
<title>Título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<script>
		function exibe_areas() {

			if (document.form.aluguel.checked == true) {
				exibeSheetOne('divaluguel');
			} else {
				escondeSheetOne('divaluguel');
			}
			
			if (document.form.venda.checked == true) {
				exibeSheetOne('divvenda');
			} else {
				escondeSheetOne('divvenda');
			}
			
			if (document.form.temporada.checked == true) {
				exibeSheetOne('divtemporada');
			} else {
				escondeSheetOne('divtemporada');
			}
			
			//exibeSheetOne('divaluguel');
			//exibeSheetOne('divvenda');
			//exibeSheetOne('divtemporada');
			
		}

		exibe_areas();

	</script>
</head>
<body>

	<table width="100%" border="0" cellspacing="0" cellpadding="0">
		<form name="form" method="post" action="">
			<tr>
				<td width="3%"><input type="checkbox" name="aluguel" value="1" OnClick="javascript:exibe_areas();"></td>
				<td width="97%">Aluguel</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="venda" value="1" OnClick="javascript:exibe_areas();"></td>
				<td>Venda</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="temporada" value="1" OnClick="javascript:exibe_areas();"></td>
				<td>Aluguel de temporada</td>
			</tr>
			<tr>
				<td colspan="2">
			 <div id="divaluguel" style="display:none;">Conteúdo da div escondida 1</div>
			 <div id="divvenda" style="display:none;">Conteúdo da div escondida 2</div>
			 <div id="divtemporada" style="display:none;">Conteúdo da div escondida 3</div>
				</td>
			</tr>
		</form>
 </table>
 
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Fiz um exemplo aqui de algo mais ou menos parecido com o que você quer, ou seja, mostra a última ação do usuário. Se a última ação for marcar um checkbox, ele mostra qual o conteúdo do div referente ao checkbox. Porém, se a última ação for desmarcar um checkbox, ele não mostra nada.

 

<html>
<head>
<title>Título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function exibe_areas(el) {
var objAluguel = document.getElementById("aluguel");
var objVenda = document.getElementById("venda");
var objTemporada = document.getElementById("temporada");

var numCheckboxes = document.form1.elements['opcao'];
var ShowDiv = document.getElementById("divShow_"+el);
var idCheckbox = "document.form1.opcao["+el+"]";
idCheckbox = eval(idCheckbox);

//Apagando todos os divs que possam estar abertos:
	for (var i=0; i<numCheckboxes.length; i++) {
	var objDiv = document.getElementById("divShow_"+i);
		objDiv.style.display = "none";
	}
	
	//alert(idCheckbox.value);
	if (idCheckbox.checked == true) {
		ShowDiv.style.display = "block";
	}
	
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<form name="form1" method="post" action="">
<tr>
	<td width="3%"><input type="checkbox" name="opcao" id="aluguel" value="1" onclick="exibe_areas(0);"></td>
	<td width="97%">Aluguel</td>
</tr>
<tr>
	<td><input type="checkbox" name="opcao" id="venda" value="2" onclick="exibe_areas(1);"></td>
	<td>Venda</td>
</tr>
<tr>
	<td><input type="checkbox" name="opcao" id="temporada" value="3" onclick="exibe_areas(2);"></td>
	<td>Aluguel de temporada</td>
</tr>
<tr>
	<td colspan="2">
	<div id="divShow_0" style="display:none;">Conteúdo da div escondida 1</div>
	<div id="divShow_1" style="display:none;">Conteúdo da div escondida 2</div>
	<div id="divShow_2" style="display:none;">Conteúdo da div escondida 3</div>
	</td>
</tr>
</form>
</table> 
</body>
</html>

Seguindo esse princípio, basta adequar às suas necessidades.

Compartilhar este post

Link para o post
Compartilhar em outros sites

vynnus    0

vynnus
Postado

klonder, era isso mesmo. Muito obrigado.

Só por curiosidade, o que alteraria no código para aparecer as 3 divs em sequência ao clicar em cada checkbox.

 

Na teoria:

Marca o checkbox1 aparece a div1

Marca o checkbox2 aparece a div2 abaixo da div1

Marca o checkbox3 aparece a div3 abaixo da div2

 

E digamos que se desmarcar o checkbox2 fique somente a div1 e div3

Se desmarcar todos os checkboxes, todas as divs desaparecem.

 

abraço!

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