Jquery复选框分组 - 单击至少一个子复选框时取消选中父项，选中所有子复选框时选中父项

>我构建了一个表单，该表单需要根据其父级动态检查输入复选框。到目前为止，我已经选择了全部，选择无，单击父项时选择部分内的所有子项，再次单击该父项时选择部分中的无项。

我遇到的问题是，我希望子复选框在取消选中至少一个时取消选中父项。例如，我单击父项上的复选框，它会选择所有子复选框...然后我单击其中一个子项以取消选择它，但我也希望父复选框知道这一点，如果其中一个子项未选中，则取消选中。

我还需要它走另一条路，所以如果我检查一个部分(而不是父级(中的所有子，在检查最后一个(所有子(后，父级将获得选定的状态。

对此的任何帮助将不胜感激，因为我发誓我正在为此脱发！

JS小提琴地址：http://jsfiddle.net/DprEu/1/

这是我的代码：

.JS

jQuery(document).ready(function($) {
// checkbox functions
  $('#selectAllButton').on('click', function () {
      $('input[type="checkbox"]').prop('checked', true).closest('label').addClass('c_on');
      $('#selectAllButton').addClass('c_on');
      $('#selectNoneButton').removeClass('c_on');
  });
  $('#selectNoneButton').on('click', function () {
      $('input[type="checkbox"]').prop('checked', false).closest('label').removeClass('c_on');
      $('#selectNoneButton').addClass('c_on');
      $('#selectAllButton').removeClass('c_on');
  });
  $('.section .section_label input').click(function () {
      var chckClass = "";
      if (!this.checked) {
          chckClass = "";
      } else {
         chckClass = "c_on"
      }
      $(this).closest('.section').find('input[type="checkbox"]').not(this).prop('checked', this.checked).closest('label').removeClass("c_on").addClass(chckClass);
  });
  $('input[type="checkbox"]').on('click', function () {
       var chckClass = "";
      if (!this.checked) {
          chckClass = "";
      } else {
         chckClass = "c_on"
      }
      $(this).closest('label').removeClass('c_on').addClass(chckClass);
  });
});

.HTML：

<div class="document">
<div class="section inline">
    <label class="label_radio lightblue" id="selectAllButton" for="selectAll">
        <input type="radio" name="masscheck" id="selectAll" />Select all</label>
</div>
<div class="section inline">
     <label class="label_radio lightblue" id="selectNoneButton" for="selectNone">
        <input type="radio" name="masscheck" id="selectNone" />Select none</label>
</div>
<div class="clear"></div>
</div>

<div class="document">
    <div class="section">
        <label class="label_check section_label blue" for="docs_1131">
            <input type="checkbox" id="docs_1131" name="docs" value="1131" />Title page</label>
    </div>
</div>
<div class="document">
    <div class="section">
        <label class="label_check section_label blue" for="docs_1118">
            <input type="checkbox" id="docs_1118" name="docs" value="1118" />
            Section 1
        </label>
        <blockquote>
            <div class="subsection">
                <label class="label_check sub_label lightblue" for="docs_1119">
                    <input type="checkbox" id="docs_1119" name="docs" value="1119" />
                    Subsection 1.1
                </label>
            </div>
            <div class="subsection">
                <label class="label_check sub_label lightblue" for="docs_1120">
                    <input type="checkbox" id="docs_1120" name="docs" value="1120" />
                    Subsection 1.2
                </label>
            </div>
            <div class="subsection">
                <label class="label_check sub_label lightblue" for="docs_1121">
                    <input type="checkbox" id="docs_1121" name="docs" value="1121" />
                    Subsection 1.3
                </label>
            </div>
            <div class="subsection">
                <label class="label_check sub_label lightblue" for="docs_1122">
                    <input type="checkbox" id="docs_1122" name="docs" value="1122" />
                    Subsection 1.4
                </label>
            </div>
        </blockquote>
    </div>
</div>
<div class="document">
    <div class="section">
        <label class="label_check section_label blue" for="docs_1123">
            <input type="checkbox" id="docs_1123" name="docs" value="1123" />
            Section 2
        </label>
        <blockquote>
            <div class="subsection">
                <label class="label_check sub_label lightblue" for="docs_1124">
                    <input type="checkbox" id="docs_1124" name="docs" value="1124" />
                    Subsection 2.1
                </label>
            </div>
            <div class="subsection">
                <label class="label_check sub_label lightblue" for="docs_1125">
                    <input type="checkbox" id="docs_1125" name="docs" value="1125" />
                    Subsection 2.2
                </label>
            </div>
            <div class="subsection">
                <label class="label_check sub_label lightblue" for="docs_1126">
                    <input type="checkbox" id="docs_1126" name="docs" value="1126" />
                    Subsection 2.3
                </label>
            </div>
            <div class="subsection">
                <label class="label_check sub_label lightblue" for="docs_1127">
                    <input type="checkbox" id="docs_1127" name="docs" value="1127" />
                    Subsection 2.4
                </label>
            </div>
        </blockquote>
    </div>
</div>

.CSS：

.c_on{
    background-color:red;
}