0

クリックすると幅が追加されますが、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>
4

1 に答える 1