Jqueryチェックボックスコントロール

私は2つのdivと2つのチェックボックスを持っています。最初のdivが表示される最初のチェックボックスをクリックします。後で2番目のチェックボックスをクリックすると、最初のdivの下に2番目のdivが表示されます。私は最初に2つのdivにいくつかのスタイルを与えます。最初のチェックボックスがチェックされていないとき、私は最初のdivの位置にすべき2番目のチェックボックスをクリックします。後で、最初のdivの下にあるはずの2番目のdivをクリックします。私が何を意味するのか知っていれば幸いです私はいくつかのコードを書くが、それは不十分である。後でチェックボックス以上を使用します。私はこの小さなアプリケーションとしてすべてのchecboxを制御する必要があります。私は論理的な方法が必要で、コードを少なくしたいと思っています。ここは最初のスタイルです。Jqueryチェックボックスコントロール

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

出典

2016-05-09 David Barbata

私はそれが誰かを助けるかもしれない私の問題を解決しました。

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

出典

2016-05-10 00:26:51

Jqueryチェックボックスコントロール

答えて

関連する問題