jQuery 实现 checkbox的树形菜单结构

参考：https://css-tricks.com/indeterminate-checkboxes/

          https://css-tricks.com/examples/IndeterminateCheckboxes/

js代码：

<script>
    // 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 这里有问题 false 的话如果错误回选 就取不到父菜单的值
          });
        }
      }

      checkSiblings(container);
    });
  </script>

html 代码：

<div>      

<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>