0

宽度通过单击添加得很好，但是当我取消选中任何复选框（如 togle）时，我想减小它，我将如何让未选中的事件在未选中时切换宽度。

<!DOCTYPE html>
<html>
<head>
<style>
.one {
    color:red;
}
.static {width:150px; background:#999; margin:50px;}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<form>
  <p>
    <input type="checkbox" name="newsletter" value="Hourly" class="compare_checkbox">
    <input type="checkbox" name="newsletter" value="Daily" class="compare_checkbox">
    <input type="checkbox" name="newsletter" value="Weekly" class="compare_checkbox">
    <input type="checkbox" name="newsletter" value="Monthly" class="compare_checkbox">
    <input type="checkbox" name="newsletter" value="Yearly" class="compare_checkbox">
  </p>
</form>
<div class="one"></div>
<script>
    $(document).ready (function(){
        var countChecked = function() {
            var n = $( "input.compare_checkbox:checked" ).length;
            $( "div.one" ).text( n + (n === 1 ? " is" : " are") + " checked!" );
            var w = ($(".static").width());
            $(".static").css("width", "+=150");
            alert(w);
        };
        countChecked();
        $( "input.compare_checkbox" ).on( "click", countChecked );

    });
</script>
<div class="static">1234</div>
</body>
</html>
4

1 回答 1

0

希望这会帮助你

//listen for checkbox click
$('.compare_checkbox').on('click', function(){
    //check current state of checkbox
    if($(this).is(':checked')){
        //expand width
    }
    else{
        //reduce width
    }
});
于 2013-07-11T12:16:17.627 回答