使用jquery的Chceckbox事件:如何让unchecked事件在uncheckd上切换宽度

Question

点击可以增加宽度，但我想在取消选中任何复选框(如toogle )时减少宽度，如何让未选中事件将宽度切换为未选中。

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

Answer 1

希望这能帮到你

//listen for checkbox click
$('.compare_checkbox').on('click', function(){
    //check current state of checkbox
    if($(this).is(':checked')){
        //expand width
    }
    else{
        //reduce width
    }
});