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

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

2 个答案: