divの幅のサイズは、選択されているラジオボタンの数に基づいて変更されます。

Question

デフォルトでは、2つのdivがデフォルトで開き、左の1つが常に存在し、3つのラジオボタンがあります。少なくとも1つを選択する必要があります（「デフォルト」列はすべて単独では使用できません）。デフォルトでは、 "default" divと "1"があり、 "2"と "3"は見えません（display：none）。各ラジオボタンは特定のdivにリンクされているので、クリックするとjQueryが幅をアニメートして、選択したdivを他の表示divと全体divにマージします。これはjQueryでどのように達成可能でしょうか？

Picture < -----私はよりよく理解

Answer 1

jsFiddleのために作られた画像へのリンクがあります。http://jsfiddle.net/K8TAS/90/

<input type="checkbox" value="1" checked disabled/> 
<input type="checkbox" value="2"/> 
<input type="checkbox" value="3"/> 

<br/><br/> 

<div style="height:200px;width:100px;float:left;background:yellow;" class="resizeDiv" id="div0">Default</div> 
<div style="height:200px;width:100px;float:left;background:red;" class="resizeDiv" id="div1">1</div> 
<div style="height:200px;width:100px;float:left;background:blue;display:none;" class="resizeDiv" id="div2">2</div> 
<div style="height:200px;width:100px;float:left;background:green;display:none;" class="resizeDiv" id="div3">3</div> 

<script>  
    $("input[type=checkbox]").click(function() 
    { 
     var amount = 2; 

     $("input[type=checkbox]").each(function() 
     { 
      if ($(this).val() != "1") 
      { 
       if ($(this).is(":checked")) 
       { 
        $("#div" + $(this).val()).show(); 
        amount++; 
       } 
       else 
       { 
        $("#div" + $(this).val()).hide(); 
       } 
      } 
     }); 

     $(".resizeDiv").each(function() 
     { 
      $(this).width(200/amount);  
     }); 
    }); 
</script> 
​