Jquery复选框控件_Jquery_Html_Checkbox

Jquery复选框控件

jquery html checkbox

Jquery复选框控件,jquery,html,checkbox,Jquery,Html,Checkbox,我有两个div和两个checkbox。İ如果单击第一个复选框，将显示第一个div。稍后，如果我单击第二个复选框，第二个div将显示在第一个div下。我在开始时为两个div提供了一些样式。当第一个复选框未选中时，如果我单击第二个复选框，它应该是第一个div的位置。稍后当我单击第二个div，它应该在第一个div下。我希望你知道我的意思。我写了一些代码，但还不够。稍后我将使用多个复选框。我必须控制所有的checbox作为这个小应用程序。我需要一种逻辑方法，我想写更少的代码。这是一开始的风格 <!

我有两个div和两个checkbox。İ如果单击第一个复选框，将显示第一个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>


点击1
点击2
$（“#mydiv1”）.hide（）；
$（“#mydiv2”）.hide（）；
$（“#selected1”）。在（“单击”，函数（）{
如果（$（'#selected1'）。是（':checked'））{
$（“#mydiv1”）。切换（“慢速”）；
$（“#mydiv1”）.css（“顶部”、“20px”）.css（“左侧”、“20px”）；
}
其他的
{
$（“#mydiv1”）.hide（）；
}
});
$（“#selected2”）。在（“单击”，函数（）{
如果（$（'#selected2'）。是（':checked'））{
$（“#mydiv2”）。切换（“慢速”）；
$（“#mydiv1”）.css（“顶部”、“90px”）.css（“左侧”、“20px”）；
}
其他的
{
$（“#mydiv1”）.hide（）；
//$（“#mydiv2”）.css（“顶部”，x.left）.css（“左侧”，x.top）；
}           
});

我解决了我的问题，它可能会帮助别人

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


点击1
点击2
点击3
点击4
$（'input[type=“checkbox”]”）。单击（函数（）{
如果（$（this.attr（“id”）=“selected1”）{
$（“#mydiv1”）.toggle（）；
}
if（$（this.attr（“id”）=“selected2”）{
$（“#mydiv2”）.toggle（）；
}
如果（$（this.attr（“id”）=“selected3”）{
$（“#mydiv3”）.toggle（）；
}
如果（$（this.attr（“id”）=“selected4”）{
$（“#mydiv4”）.toggle（）；
}       
});