LI selection widget

CategoryWidget.html

<style>
	ul.category_selection {
	    margin: 10px;
	}

	ul.category_selection li {
	    padding: 5px;
	    border: 1px solid #ccc;
	    margin: 5px 16px 5px 0;
	    display: block;
	    float: left;
	    width: 23%;
    
	}

	ul.category_selection li label {
	    background: #f1f1f1;
	    padding: 0.25em 0.5em;
	    border: 1px solid #e6e6e6
	}

	ul.category_selection li.active label {
	    background: #ccc;
	}

	ul.category_selection li label input {
	    float: right;
	}
</style>

<ul class="category_selection">
   <li class="active">
      <label>
         <input type="checkbox"/>
		Category 1
      </label>
   </li>
   <li>
      <label>
         <input type="checkbox"/>
		Category 2
      </label>
   </li>
   <li class="active">
      <label>
         <input type="checkbox"/>
		Category 3
      </label>
   </li>
</ul>

<script>
	CategorySelect = Class.create({
	    // Requires Prototype
	    initialize: function(){
	        document.observe("dom:loaded", function(){
	            var checkbox_change_behavior = function() {
	                if (this.up('li') != null) {
	                    this.up('li').removeClassName('active');
	                    if (this.checked) {
	                        this.up('li').addClassName('active')
	                    }
	                }
	            }
	            var add_checkbox_observers = function() {
	                $$('ul.category_selection li input').each(function(el){
	                    el.observe('change', checkbox_change_behavior )
	                })
	            }.bind(this);
	            add_checkbox_observers();
	        }.bindAsEventListener(this));
	    }
	}
	)
</script>