javascript - 選択されたラジオボタンの数に基づいて div 幅のサイズを変更します

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