I really like the how layers can be selected in Photoshop and Fireworks by holding the mouse button down and dragging the cursor over the check boxes. I always miss this feature on web forms with more than a few check boxes on them, so I thought it would be a great idea if it could be replicated.
Adding this functionality is extremely easy, all we need is the following script:

<script>
  (function($){

    //listen for mousedowns over target area
    $("fieldset").mousedown(function(e) {

      //stop text selection
      e.preventDefault();

      //stop text selection in IE
      if (window.ActiveXObject) {

        var fset = document.getElementById("checkers");
        fset.onselectstart = function () { return false; }
      }

      //add mouseovers to checkboxes
      $("input[type=checkbox]").mouseover(function() {		

        //toggle checked state
        ($(this).attr("checked") === false) ? $(this).attr("checked", "checked") : $(this).attr("checked", "");
      });
    });

    //stop listening to mouseovers when mouse button released
    $("fieldset").mouseup(function() {
      $("input[type=checkbox]").unbind("mouseover");	

      //stop unselecting text
      $("fieldset").unbind("select");
    });
  })(jQuery);
</script>

Easy right? Let’s look at what we do; first we set a mousedown event on the