jQuery復選框分組-至少單擊一個子復選框時取消選中父級，選中所有子復選框時選中父級

Question

我建立了一個需要根據其父項動態檢查輸入復選框的表單。 到目前為止，我已經選擇了所有內容，不選擇任何內容，單擊父級時選擇了該節內的所有子級，再次單擊該父級時，則未選擇該節內的所有子級。

我遇到的問題是，當取消選中至少一個子復選框時，我希望子復選框不被選中。 因此，例如，我單擊父級上的復選框，它選中了所有子復選框...然后單擊那些子級中的一個以取消選擇它，但我也希望父級復選框知道這一點，如果要兒童不受檢查。

我也需要這樣做，如果我檢查一個節中的所有子項（而不是父項），則在檢查最后一個子項（全部）之后，父項將獲得選定狀態。

當我發誓我為此失去頭發時，對此的任何幫助將不勝感激！

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

Answer 1

嘗試

jQuery(document).ready(function($) {
    var $all = $('#selectAllButton input[type="radio"]').change(function () {
        $sectionchecks.prop('checked', true).trigger('change');
        $none.closest('label').removeClass('c_on');
    });
    var $none = $('#selectNoneButton input[type="radio"]').change(function () {
        $sectionchecks.prop('checked', false).trigger('change');
        $all.closest('label').removeClass('c_on');
    });

    $('.section .section_label input').click(function () {
        $(this).closest('.section').find('.subsection input[type="checkbox"]').prop('checked', this.checked).trigger('change')
    });

    $('.section .subsection input').change(function () {
        var $section = $(this).closest('.section');
        var $childs = $section.find('.subsection input[type="checkbox"]');
        $section.find('.section_label input[type="checkbox"]').prop('checked', $childs.not(':checked').length == 0).trigger('change')
    });

    var $sectionchecks = $('.section').find('input[type="checkbox"]');
    $sectionchecks.add($none).add($all).change(function(){
        $(this).closest('label').toggleClass('c_on', this.checked);
    })
});

演示： 小提琴

Answer 2

如果此結構不存在，您可以找到您的父復選框，如下所示：

$('input[type="checkbox"]').on('click', function () {
       var chckClass = "";
      if (!this.checked) {
          chckClass = "";
      } else {
         chckClass = "c_on"
      }
      if($(this).parent().hasClass('sub_label')) { // HERE YOU KNOW IF ITS A SON OR FATHER         
         $(this).parent().parent().parent().parent().find('input[type:checkbox]:first').attr('checked');
         $(this).closest('label').removeClass('c_on').addClass(chckClass);
      }
  });