Publicado em 13 de ago.

Mudar DIV com Javascript

Prezados,

estou com um probleminha...

Tenho um Checkbox que ao ser marcado ele apresenta uma div e ao desmarcar ele apresenta uma outra div.

Está funcionando até que bem, porém só funciona após o 3º click. ?!?!?!

Alguém sabe como resolver isso?

	E uma outra dúvida, essas funções não funcionam se estiver utilizando uma class no checkbox? Ex: <input type="checkbox" name="mp_sj" id="mp_sj" onclick="mostrar(this)"  **class="js-switch"**>

	 

<script>

	function mostrar(){
 $("#mp_sj").click(function(e) {
 if ($(this).is(':checked')) { //Retornar true ou false
 $('.minhaDiv1').show();
 $('.minhaDiv2').hide();
 }
 else {
 $('.minhaDiv1').hide();
 $('.minhaDiv2').show();
 }
 });
	};
	</script>

<style>
 .minhaDiv1{display:none;}
 .minhaDiv2{display:block;}
</style>

<input type="checkbox" name="mp_sj" id="mp_sj" onclick="mostrar(this)"/>
<div class="minhaDiv1">
	OK1
</div>
<div class="minhaDiv2">
	OK2
</div>

	Agradeço desde já a atenção de todos!

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Douglas Julião· 14 de ago.

tira o onclick do input:

<input type="checkbox" name="mp_sj" id="mp_sj">

	 

	e chama a função  em algum lugar, ou apenas remove o click function da sua função mostrar

	 

function mostrar(){
 $("#mp_sj").click(function(e) {
 if ($(this).is(':checked')) { //Retornar true ou false
 $('.minhaDiv1').show();
 $('.minhaDiv2').hide();
 }
 else {
 $('.minhaDiv1').hide();
 $('.minhaDiv2').show();
 }
 });
};
mostrar();

// OU APENAS FAÇA ISSO

var div1 = $('.minhaDiv1'),
	div2 = $('.minhaDiv2');
$("#mp_sj").click(function(e) {
	if ($(this).is(':checked')) {
 div1.show();
 div2.hide();
	} else {
 div1.hide();
 div2.show();
	}
});

s3c0· 17 de ago.

Olá /profile/213374-douglas-juli%C3%A3o/?do=hovercard" data-mentionid="213374" href="/profile/213374-douglas-juli%C3%A3o/" rel="">@Douglas Julião, obrigado pela resposta...

mas não funcionou com o exemplo que você passou.

Pita· 18 de ago.

Precisa dar uma tratada melhor, mas acho que já ajuda

<input type="checkbox" name="mp_sj" id="mp_sj" onclick="mostrar(this)"/>
<div id="minhaDiv1">
	OK1
</div>
<div id="minhaDiv2">
	OK2
</div>
<script>
 function mostrar(objCheck){
 if (objCheck.checked) {
 $('#minhaDiv1').show();
 $('#minhaDiv2').hide();
 }
 else {
 $('#minhaDiv1').hide();
 $('#minhaDiv2').show();
 }
};
</script>

Douglas Julião· 18 de ago.

Aqui está funcionando:

https://jsfiddle.net/douglasjuliao/ehqsv4u6/

e sobre essa: class="js-switch"

Talvez essa classe esta criando um estilo para o checkbox, nesse caso tenta trocar o click por change.

https://jsfiddle.net/douglasjuliao/ehqsv4u6/1/