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>
1
solved Div width resize based on how many radio buttons are selected [closed]