Les traigo una consulta respecto a jQuery y HTML, dispongo de un formulario y en esta tres checkbox lo cual cada uno va tener un comportamiento diferente es decir cuando selecciones el primer checkbox me muestre en cuando lo deselecciones me oculte dicho div hasta el momento he conseguido lo siguiente:
<script>
$(document).ready(function(){
$("#checkbox1").click(function(){
if(this.checked == true){
id = $(this).val();
$.post("index.php?action=getcolor1", {id:id}, function(data){
$("#result").html(data);
$("#checkbox2").attr('checked', false);
$("#checkbox3").attr('checked', false);
});
}else if(this.checked == false){
$("#result").hide();
}
});
$("#checkbox2").click(function(){
if(this.checked == true){
id = $(this).val();
$.post("index.php?action=getcolor2", {id:id}, function(data){
$("#result").html(data);
$("#checkbox1").attr('checked', false);
$("#checkbox3").attr('checked', false);
});
}else if(this.checked == false){
$("#result").hide();
}
});
$("#checkbox3").click(function(){
if(this.checked == true){
id = $(this).val();
$.post("index.php?action=getcolor3", {id:id}, function(data){
$("#result").html(data);
$("#checkbox1").attr('checked', false);
$("#checkbox2").attr('checked', false);
});
}else if(this.checked == false){
$("#result").hide();
}
});
});
Hasta en este momento puedo llamar cada uno de los elementos de cada checkbox pero al momento de deselecionar no mi quita mi <div id="#result"></div>
.
Alguien me puede mencionar alguna referencia.