根据父/子输入状态检查/取消选中输入

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