Div 宽度根据选择的单选按钮数量调整大小

Div width resize based on how many radio buttons are selected

本文关键字：调整 单选按钮 选择 Div      更新时间：2023-09-26

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

图片 <-----我有一个链接到我制作的图片，以便更好地理解

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>
​
相关文章：