Проверять / снимать отметки с входов в зависимости от родительского / дочернего статуса ввода

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