jesperbjensen/checkboxlist.html

## checkboxlist.html
<!DOCTYPE html>

<html>
  <head>
    <style type="text/css">
      ul { list-style: none; margin: 0; padding: 0;}
      input[type=text] { border: 0px; width: 600px;}
      li[data-indent='1'] { padding-left: 20px; }
      li[data-indent='2'] { margin-left: 40px; }
      li[data-indent='3'] { margin-left: 60px; }
      li[data-indent='4'] { margin-left: 80px; }
      li[data-indent='5'] { margin-left: 100px; }
      li[data-indent='6'] { margin-left: 120px; }
      li[data-indent='7'] { margin-left: 140px; }
      li[data-indent='8'] { margin-left: 160px; }
      li[data-indent='9'] { margin-left: 180px; }
      li[data-indent='10'] { margin-left: 200px; }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

    <script type="text/javascript">
      $(function() {

        $("input[type=text]").focus().live("keypress", function(e) {
          var container = get_container(this);

          switch(e.keyCode) {
            // enter - new item (shift+enter insert before)
            case 13:
              var template = $("#templates #new-item li").clone();
              template.attr("data-indent", container.attr("data-indent"))

              if(e.shiftKey) {
                container.before(template);
              } else {
                container.after(template);
              }

              $("input[type=text]",template).focus();
            break;

            // shift+space - check uncheck
            case 32:
              if(e.shiftKey) {
                var checkbox = $("input[type=checkbox]",container);
                checkbox.attr('checked', !checkbox.is(":checked"));
                return false;
              }
            break;
          }

        }).live("keydown", function(e) {
          var container = get_container(this);

          switch(e.keyCode) {
            // up-key - move up
            case 38:
              $("input[type=text]",container.prev()).focus();
            break;

            // down-key - move down
            case 40:
              $("input[type=text]",container.next()).focus();
            break;

            // tab key, or shift+tab - indent or outdent
            case 9:
              if(e.shiftKey) {
                indent_item(container,-1);
              } else {
                indent_item(container,1);
              }

              return false;
            break;
          }
        }).live("blur", function() {
          var container = get_container(this);

          if($(this).val() == "") {
            if($("#items li").length > 1) {
              container.remove();
            }
          }
        })

        function indent_item(container, value) {
          var indent = container.attr("data-indent");

          if(indent == undefined && value > 0) {
            indent = value;
          } else {
            indent = parseInt(indent) + value;
            // max indent is 10
            if(indent > 10) {
              indent = 10;
            }
            if(indent < 0) {
              indent = 0;
            }
          }

          container.attr("data-indent",indent);
          $("input[type=hidden]",container).val(indent);
        }

        function get_container(item) {
          return $(item).closest("li");
        }
      });
    </script>
  </head>
  <body>
    <h1>Todo list</h1>
    <p>Shortcuts:</p>
    <ul style="margin-bottom: 40px;">
      <li><strong>Enter:</strong> New item below</li>
      <li><strong>Shift+Enter:</strong> New item above</li>
      <li><strong>Shift+Space:</strong> Check/Uncheck item</li>
      <li><strong>Tab:</strong> Indent item</li>
      <li><strong>Shift+Tab:</strong> Outdent item</li>
    </ul>
    <ul id="items">
      <li>
        <input type="checkbox" name="done">
        <input type="text" name="text" />
        <input type="hidden" name="indent" value="0">
      </li>
    </ul>

    <div id="templates" style="display:none">
      <div id="new-item">
        <li>
          <input type="checkbox" name="done">
          <input type="text" name="text" />
          <input type="hidden" name="indent" value="0">
        </li>
      </div>
    </div>
  </body>
</html>
	<!DOCTYPE html>

	<html>
	<head>
	<style type="text/css">
	ul { list-style: none; margin: 0; padding: 0;}
	input[type=text] { border: 0px; width: 600px;}
	li[data-indent='1'] { padding-left: 20px; }
	li[data-indent='2'] { margin-left: 40px; }
	li[data-indent='3'] { margin-left: 60px; }
	li[data-indent='4'] { margin-left: 80px; }
	li[data-indent='5'] { margin-left: 100px; }
	li[data-indent='6'] { margin-left: 120px; }
	li[data-indent='7'] { margin-left: 140px; }
	li[data-indent='8'] { margin-left: 160px; }
	li[data-indent='9'] { margin-left: 180px; }
	li[data-indent='10'] { margin-left: 200px; }
	</style>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

	<script type="text/javascript">
	$(function() {

	$("input[type=text]").focus().live("keypress", function(e) {
	var container = get_container(this);

	switch(e.keyCode) {
	// enter - new item (shift+enter insert before)
	case 13:
	var template = $("#templates #new-item li").clone();
	template.attr("data-indent", container.attr("data-indent"))

	if(e.shiftKey) {
	container.before(template);
	} else {
	container.after(template);
	}

	$("input[type=text]",template).focus();
	break;

	// shift+space - check uncheck
	case 32:
	if(e.shiftKey) {
	var checkbox = $("input[type=checkbox]",container);
	checkbox.attr('checked', !checkbox.is(":checked"));
	return false;
	}
	break;
	}

	}).live("keydown", function(e) {
	var container = get_container(this);

	switch(e.keyCode) {
	// up-key - move up
	case 38:
	$("input[type=text]",container.prev()).focus();
	break;

	// down-key - move down
	case 40:
	$("input[type=text]",container.next()).focus();
	break;

	// tab key, or shift+tab - indent or outdent
	case 9:
	if(e.shiftKey) {
	indent_item(container,-1);
	} else {
	indent_item(container,1);
	}

	return false;
	break;
	}
	}).live("blur", function() {
	var container = get_container(this);

	if($(this).val() == "") {
	if($("#items li").length > 1) {
	container.remove();
	}
	}
	})

	function indent_item(container, value) {
	var indent = container.attr("data-indent");

	if(indent == undefined && value > 0) {
	indent = value;
	} else {
	indent = parseInt(indent) + value;
	// max indent is 10
	if(indent > 10) {
	indent = 10;
	}
	if(indent < 0) {
	indent = 0;
	}
	}

	container.attr("data-indent",indent);
	$("input[type=hidden]",container).val(indent);
	}

	function get_container(item) {
	return $(item).closest("li");
	}
	});
	</script>
	</head>
	<body>
	<h1>Todo list</h1>
	<p>Shortcuts:</p>
	<ul style="margin-bottom: 40px;">
	<li><strong>Enter:</strong> New item below</li>
	<li><strong>Shift+Enter:</strong> New item above</li>
	<li><strong>Shift+Space:</strong> Check/Uncheck item</li>
	<li><strong>Tab:</strong> Indent item</li>
	<li><strong>Shift+Tab:</strong> Outdent item</li>
	</ul>
	<ul id="items">
	<li>
	<input type="checkbox" name="done">
	<input type="text" name="text" />
	<input type="hidden" name="indent" value="0">
	</li>
	</ul>

	<div id="templates" style="display:none">
	<div id="new-item">
	<li>
	<input type="checkbox" name="done">
	<input type="text" name="text" />
	<input type="hidden" name="indent" value="0">
	</li>
	</div>
	</div>
	</body>
	</html>