基於多少個單選按鈕的div寬度調整大小

Question

默認情況下，基本上theres 2 div打開，左邊的一個總是在那裏，然後你有3個單選按鈕。至少必須選擇一個（本身不能有「默認」列）。默認情況下，「默認」div和「1」在那裏，「2」和「3」不可見（顯示：無）。每個單選按鈕都鏈接到特定的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> 
​