lvivski/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Indeterminate Checkboxes</title>
	<link rel="stylesheet" href="style.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script src="script.js"></script>
</head>
<body>
	<div id="page-wrap">
	   <h1>Indeterminate Checkboxes</h1>
  	 <ul>
        <li>
            <input type="checkbox" name="tall" id="tall">
            <label for="tall">Tall Things</label>
            <ul>
                 <li>
                     <input type="checkbox" name="tall-1" id="tall-1">
                     <label for="tall-1">Buildings</label>
                 </li>
                 <li>
                     <input type="checkbox" name="tall-2" id="tall-2">
                     <label for="tall-2">Giants</label>
                     <ul>
                         <li>
                             <input type="checkbox" name="tall-2-1" id="tall-2-1">
                             <label for="tall-2-1">Andre</label>
                         </li>
                         <li>
                             <input type="checkbox" name="tall-2-2" id="tall-2-2">
                             <label for="tall-2-2">Paul Bunyan</label>
                         </li>
                     </ul>
                 </li>
                 <li>
                     <input type="checkbox" name="tall-3" id="tall-3">
                     <label for="tall-3">Two sandwiches</label>
                 </li>
            </ul>
        </li>
        <li>
            <input type="checkbox" name="short" id="short">
            <label for="short">Short Things</label>
            <ul>
                 <li>
                     <input type="checkbox" name="short-1" id="short-1">
                     <label for="short-1">Smurfs</label>
                 </li>
                 <li>
                     <input type="checkbox" name="short-2" id="short-2">
                     <label for="short-2">Mushrooms</label>
                 </li>
                 <li>
                     <input type="checkbox" name="short-3" id="short-3">
                     <label for="short-3">One Sandwich</label>
                 </li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

## script.js
$(function() {
  	  // Apparently click is better chan change? Cuz IE?
      $('input[type="checkbox"]').change(function(e) {
      var checked = $(this).prop("checked"),
          container = $(this).parent(),
          siblings = container.siblings();

      container.find('input[type="checkbox"]').prop({
          indeterminate: false,
          checked: checked
      });

      function checkSiblings(el) {
          var parent = el.parent().parent(),
              all = true;

          el.siblings().each(function() {
              return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
          });

          if (all && checked) {
              parent.children('input[type="checkbox"]').prop({
                  indeterminate: false,
                  checked: checked
              });
              checkSiblings(parent);
          } else if (all && !checked) {
              parent.children('input[type="checkbox"]').prop("checked", checked);
              parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
              checkSiblings(parent);
          } else {
              el.parents("li").children('input[type="checkbox"]').prop({
                  indeterminate: true,
                  checked: false
              });
          }
        }
        checkSiblings(container);
      });
    });

## style.css
* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }

#page-wrap { width: 960px; margin: 80px auto; }

ul {
  list-style: none;
  margin: 5px 20px;
}

li {
  margin: 0 0 5px 0;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Indeterminate Checkboxes</title>
	<link rel="stylesheet" href="style.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script src="script.js"></script>
	</head>
	<body>
	<div id="page-wrap">
	<h1>Indeterminate Checkboxes</h1>
	<ul>
	<li>
	<input type="checkbox" name="tall" id="tall">
	<label for="tall">Tall Things</label>
	<ul>
	<li>
	<input type="checkbox" name="tall-1" id="tall-1">
	<label for="tall-1">Buildings</label>
	</li>
	<li>
	<input type="checkbox" name="tall-2" id="tall-2">
	<label for="tall-2">Giants</label>
	<ul>
	<li>
	<input type="checkbox" name="tall-2-1" id="tall-2-1">
	<label for="tall-2-1">Andre</label>
	</li>
	<li>
	<input type="checkbox" name="tall-2-2" id="tall-2-2">
	<label for="tall-2-2">Paul Bunyan</label>
	</li>
	</ul>
	</li>
	<li>
	<input type="checkbox" name="tall-3" id="tall-3">
	<label for="tall-3">Two sandwiches</label>
	</li>
	</ul>
	</li>
	<li>
	<input type="checkbox" name="short" id="short">
	<label for="short">Short Things</label>
	<ul>
	<li>
	<input type="checkbox" name="short-1" id="short-1">
	<label for="short-1">Smurfs</label>
	</li>
	<li>
	<input type="checkbox" name="short-2" id="short-2">
	<label for="short-2">Mushrooms</label>
	</li>
	<li>
	<input type="checkbox" name="short-3" id="short-3">
	<label for="short-3">One Sandwich</label>
	</li>
	</ul>
	</li>
	</ul>
	</div>
	</body>
	</html>
	$(function() {
	// Apparently click is better chan change? Cuz IE?
	$('input[type="checkbox"]').change(function(e) {
	var checked = $(this).prop("checked"),
	container = $(this).parent(),
	siblings = container.siblings();

	container.find('input[type="checkbox"]').prop({
	indeterminate: false,
	checked: checked
	});

	function checkSiblings(el) {
	var parent = el.parent().parent(),
	all = true;

	el.siblings().each(function() {
	return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
	});

	if (all && checked) {
	parent.children('input[type="checkbox"]').prop({
	indeterminate: false,
	checked: checked
	});
	checkSiblings(parent);
	} else if (all && !checked) {
	parent.children('input[type="checkbox"]').prop("checked", checked);
	parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
	checkSiblings(parent);
	} else {
	el.parents("li").children('input[type="checkbox"]').prop({
	indeterminate: true,
	checked: false
	});
	}
	}
	checkSiblings(container);
	});
	});
	* { margin: 0; padding: 0; }
	body { font: 14px Georgia, serif; }

	#page-wrap { width: 960px; margin: 80px auto; }

	ul {
	list-style: none;
	margin: 5px 20px;
	}

	li {
	margin: 0 0 5px 0;
	}