CODEWITHSUNDEEP
jqueryhtmlcheckbox
David Barbata
David Barbata

Reputation: 373

Jquery checkbox control

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="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></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>

Upvotes: 1

Views: 68

Answers (1)

David Barbata
David Barbata

Reputation: 373

I solved my problem it may help someone. 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>

<input type="checkbox" id="selected1">Click1
<input type="checkbox" id="selected2">Click2
<input type="checkbox" id="selected3">Click3
<input type="checkbox" id="selected4">Click4

<div id="mydiv1" style="width:50px; height:50px; background-color:blue; display:block; display:none; margin-top:20px;"></div>
<div id="mydiv2" style="width:20px; height:20px; background-color:red; display:none; margin-top:20px;"></div>
<div id="mydiv3" style="width:40px; height:40px; background-color:blue; display:none; margin-top:20px;"></div>
<div id="mydiv4" style="width:60px; height:60px; background-color:red; display:none; margin-top:20px;"></div>
<div id="mydiv5" style="margin-top:200px;"></div>


<script type="text/javascript">
    $('input[type="checkbox"]').click(function(){
        if($(this).attr("id")=="selected1"){
            $("#mydiv1").toggle();
        }
        if($(this).attr("id")=="selected2"){
            $("#mydiv2").toggle();
        }
        if($(this).attr("id")=="selected3"){
            $("#mydiv3").toggle();
        }
        if($(this).attr("id")=="selected4"){
            $("#mydiv4").toggle();
        }       
    });

</script>
</body></html>

Upvotes: 1

Related Questions