Jquery checkbox grouping - 적어도 하나의 하위 체크 박스가 클릭되었을 때 상위 체크 박스를 체크 해제하고, 모두 체크했을 때 상위 체크 박스를 선택하십시오.

Question

부모에 따라 입력 체크 박스를 동적으로 점검해야하는 양식을 작성했습니다. 지금까지 모든 항목을 선택하고 없음을 선택하고, 상위 항목을 클릭하면 섹션 내의 모든 하위 항목을 선택하고 해당 항목을 다시 클릭하면 섹션 내에서 아무 것도 선택하지 않습니다.

내가 겪고있는 문제는 적어도 하나가 선택 취소되었을 때 부모 확인란을 선택 취소하도록하려는 것입니다. 예를 들어 부모의 확인란을 클릭하면 모든 하위 확인란이 선택됩니다. 그런 다음 그 자식 중 하나를 클릭하여 선택을 취소하지만 부모 확인란에이를 알고 싶으면 선택을 취소합니다. 아이들은 체크되지 않았다.

다른 방법으로 이동하려면이 작업이 필요합니다. 섹션 (부모는 제외) 내의 모든 하위를 검사하면 마지막 하위가 선택된 후 (모두) 부모가 선택한 상태가됩니다.

나는 이것으로 머리카락을 잃어 버리겠다고 맹세하는데 큰 도움이 될 것입니다!

JS 바이올린 주소 :

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 :

다음 http://jsfiddle.net/DprEu/1/

내 코드입니다 이 같은 0

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

데모 : Fiddle

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