Permalink
Browse files

Added files

  • Loading branch information...
1 parent 825d81c commit 513102a8c5ab6090231dba9a37fc59a2fabf2924 @JamyGolden JamyGolden committed Aug 7, 2012
Showing with 140 additions and 0 deletions.
  1. +21 −0 css/style.css
  2. +119 −0 index.html
View
@@ -0,0 +1,21 @@
+/*
+ CSS-Tricks Example
+ by Chris Coyier
+ http://css-tricks.com
+*/
+
+* { margin: 0; padding: 0; }
+body { font: 14px Georgia, serif; }
+
+article, aside, figure, footer, header, hgroup,
+menu, nav, section { display: block; }
+
+#page-wrap { width: 960px; margin: 80px auto; }
+
+ul {
+ list-style: none;
+ margin: 5px 20px;
+}
+li {
+ margin: 0 0 5px 0;
+}
View
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset='UTF-8'>
+
+ <title>Indeterminate Checkboxes</title>
+
+ <link rel='stylesheet' href='css/style.css'>
+
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+ <script>
+ $(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);
+ });
+ });
+ </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>

0 comments on commit 513102a

Please sign in to comment.