Jquery复选框分组 - 当至少点击一个子复选框时取消选中父项，当全部选中时检查父项

我已经构建了一个需要根据其父项动态检查输入复选框的表单。到目前为止，我已经选择了全部，选择无，当单击父项时选择段内的所有子项，并在再次单击该父项时在段内选择无。Jquery复选框分组 - 当至少点击一个子复选框时取消选中父项，当全部选中时检查父项

我遇到的问题是，我想让子复选框在取消选中至少一个时取消选中父项。因此，例如，我点击父母的复选框，它选择所有的子复选框...然后我点击其中一个孩子取消选择它，但我也希望父复选框知道这一点，并取消选择，如果如果其中一个孩子没有选择。

我也需要这样做的另一种方式，所以如果我检查所有子节内（而不是父），检查最后一个（所有）后，父母将获得选定的状态。

任何帮助，将不胜感激，因为我发誓我失去了这个头发！

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

这里是我的代码：

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

来源

2013-10-09 jaread83

尝试

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

来源

2013-10-09 13:50:38

这是伟大的，不正是我需要。唯一的问题是，它已经关闭了选定状态的c_on的类更改 – jaread83

我已经将您的解决方案集成到我的工作中，并使其工作，但我遇到了未从父标签应用或删除类名的问题。这里是JSFiddle链接：http://jsfiddle.net/DprEu/2/ – jaread83

@ jaread83什么是不工作的情况？ –

如果这将是跳投这个结构，你可以找到你父复选框这样的：

$('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); 
     } 
    });

来源

2013-10-09 13:36:56 Guerra

Jquery复选框分组 - 当至少点击一个子复选框时取消选中父项，当全部选中时检查父项

回答

相关问题