AngularJS Example:

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app="ca">
  <p>The "NOT CHECKED" should hide when checkbox is checked</p>
  <div ng-controller="TodoCtrl">
    <group>
      <form ng-submit="addTodo()">
        <input type="checkbox" ng-model="checked">
      </form>
    </group>
    <div ng-hide="checked">NOT CHECKED</div>
  </div>
</div>

CSS

.group {
    border: 1px solid #CCC;
    padding: 10px;
}

JavaScript

function TodoCtrl($scope) {
  
}

angular.module('ca', []).directive('group', function ($log) {
    $log.log("##create widget: group");
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template: '<div ng-transclude></div>',
        link: function (scope, element, attrs) {
            element.addClass('group');
        }
    };
});