Mudar DIV com Javascript

[s3c0 0]

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!

[Douglas Julião 34]

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 0]

Olá @Douglas Julião, obrigado pela resposta...

 

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

[Pita 53]

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 34]

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/