I have two divs and two checkbox. İf I click the first checkbox the first div will appear. Later if I click the second checkbox the second div will appear under the first div. I give some style to two divs in the beginning. When the first checkbox is not checked if I click the second checkbox which should be position of first div. Later when I click the second div which should be under the first div. I hope you know what I mean. I write some code but it is insufficient. Later I will use more than checkbox. I have to control all checbox as this small application. I need a logical way and I want to write less code. Here is style of in the beginning.
<!DOCTYPE html>
<html>
<head>
<script src="http://ift.tt/1ROJ5xx"></script>
</head>
<body>
<div id="mydiv1" style="width:50px; height:50px; background-color:blue; display:block; position:absolute;"></div>
<div id="mydiv2" style="width:20px; height:20px; background-color:red; position:absolute;"></div>
<div id="mydiv3" style="margin-top:200px;"></div>
<input type="checkbox" id="selected1">Click1
<input type="checkbox" id="selected2">Click2
<script type="text/javascript">
$("#mydiv1").hide();
$("#mydiv2").hide();
$("#selected1").on("click", function(){
if ($('#selected1').is(':checked')){
$("#mydiv1").toggle("slow");
$("#mydiv1").css("top","20px").css("left","20px");
}
else
{
$("#mydiv1").hide();
}
});
$("#selected2").on("click", function(){
if ($('#selected2').is(':checked')){
$("#mydiv2").toggle("slow");
$("#mydiv1").css("top","90px").css("left","20px");
}
else
{
$("#mydiv1").hide();
//$("#mydiv2").css("top",x.left).css("left",x.top);
}
});
</script>
</body></html>
Aucun commentaire:
Enregistrer un commentaire