javascript - 根据选择的单选按钮数量调整 Div 宽度

Question

基本上默认情况下打开了 2 个 div，左边的一个总是在那里，然后你有 3 个单选按钮。必须选择至少一个（不能单独拥有“默认”列）。默认情况下，“默认” div 和“1”在那里，“2”和“3”是不可见的（显示：无）。每个单选按钮都链接到特定的 div，因此当单击时，jQuery 将动画宽度以将选定的 div 合并到与其他可见 div 的整体 div 中。jQuery 如何实现这一点？

图片<-----我有一个链接到我为更好地理解而制作的图片

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