Question

我有两个div和两个复选框。如果我单击第一个复选框，将出现第一个div。稍后如果我点击第二个复选框，第二个div将出现在第一个div下面。我在开头给两个div一些风格。如果我没有选中第一个复选框，则单击第二个复选框，该复选框应该是第一个div的位置。后来当我点击第二个div应该在第一个div下面。我希望你知道我的意思。我写了一些代码，但还不够。稍后我将使用多个复选框。我必须控制所有checbox作为这个小应用程序。我需要一种逻辑方式，我想编写更少的代码。这是一开始的风格。

<!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>

Answer 1

我解决了我的问题，它可以帮助某人。

<!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>

Jquery复选框控件

1 个答案: