檢查/取決於父/子輸入狀態取消選中輸入

Question

我需要以選中/取消父母和孩子的投入是合乎邏輯的：

[x] parent [ ] child1 [x] child2 

在這個例子中，如果我取消child2，parent需求是也沒有檢查。而且，如果我取消選中parent，則不能再檢查child2。

[ ] parent [ ] child1 [ ] child2 

在這種情況下，如果我檢查child2，parent也必須被檢查。

我認爲這是非常合乎邏輯的，如果沒有檢查其父母，就無法檢查孩子，如果我取消選中一個孩子（並且這是唯一被檢查的孩子），父母也必須取消選中。

我正在研究PHP，所以任何與Javascript（jQuery）的集成對我來說都會很好。

Answer 1

這可能是一個很好的起點：

<form id="theform"> 
    <label>Parent</label><input name="group1" type="checkbox" value="parent1" class="parent" /> 
    <label>Child 1</label><input name="group1" type="checkbox" value="child1" class="child" /> 
    <label>Child 2</label><input name="group1" type="checkbox" value="child2" class="child" /> 
    <label>Child 3</label><input name="group1" type="checkbox" value="child3" class="child" /> 
</form> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#theform input:checkbox').change(function(){ 
      // Parent Checkbox Change // 
      if ($(this).hasClass('parent')){ 
       if (!$(this).is(':checked')){ 
        $('input.child[name="'+$(this).attr('name')+'"]').removeAttr('checked'); 
       } 
      } 
      // Child Checkbox Change // 
      else if ($(this).hasClass('child')){ 
       if ($(this).is(':checked')){ 
        $('input.parent[name="'+$(this).attr('name')+'"]').attr('checked', 'checked'); 
       } else { 
        if ($('input.child[name="'+$(this).attr('name')+'"]:checked').length == 0){ 
         $('input.parent[name="'+$(this).attr('name')+'"]').removeAttr('checked'); 
        } 
       } 
      } 
     }); 
    }); 
</script> 

小提琴這裏：http://jsfiddle.net/pjZnZ/3/

我希望這有助於！

Answer 2

檢查此琴：http://jsfiddle.net/WvYgB/1/

的jQuery：

$('.parent').change(function(){ 
    if (!($(this).is(':checked'))) { 
     $('.children').attr('checked', false); 
    } 
}); 

$('.children').change(function(){ 
    if($(this).is(':checked') && !$('.parent').is(':checked')) { 
     $(this).attr('checked', false); 
    } 
    if (!($(this).is(':checked') || $(this).siblings('.children').is(':checked'))) { 
     $('.parent').attr('checked', false); 
    } 
});