Отметьте / снимите отметку с родителей и детей

Question

Можете ли вы сделать лучший код? Мне нужно установить / снять отметку со всех дочерних элементов в соответствии с родителями, а при проверке дочерних элементов - проверить родительских, а когда все дочерние элементы не отмечены - снимите флажок с родительского элемента.

    $(".parent").children("input").click(function() {
    $(this).parent().siblings("input").attr("checked", this.checked);
});

$(".parent").siblings("input").click(function() {
    if (this.checked) {
        $(this).siblings("div").children("input").attr("checked", true);
        return;
    }

    var childs = $(this).siblings("div").siblings("input");

    for (i = 0; i < childs.length; i++) {
        if ($(childs.get(i)).attr("checked"))
            return;
    }

    $(this).parent().children("div").children("input").attr("checked", false);
});

Answer 1

Воу, я в замешательстве. похоже, что у вас есть входы с другими входами внутри них? ... что не имеет смысла. Вот то, что я думаю как выглядит ваша структура, вот и я.

<div class="parent">
    <input type="checkbox" />
    <div>
        <input type="checkbox" />
        <input type="checkbox" />
    </div>
    <input type="checkbox" />
    <div>
        <input type="checkbox" />
        <input type="checkbox" />
    </div>
</div>

А вот код, который я бы использовал.

$("input[type='checkbox']").click(function() {
    // turn on or off all descendants.
    $(this)         // get this checkbox
        // get the div directly after it
        .next('div')
        // get ALL the inputs in that div (not just first level children)
        .find("input[type='checkbox']")
        .attr("checked", this.checked)
    ;

    // now check if we have to turn the parent on or off.
    $(this)
        .parent()  // this will be the div
        .prev('input[type="checkbox"]')  // this is the input
        .attr(
            "checked",     // set checked to true if...
            this.checked   // this one is checked, or...
            || $(this).siblings("input[type='checkbox'][checked]").length > 0
                           // any of the siblings are checked.
        )
    ;
});

обновление: я только что проверил это, и оно полностью работает (ух!). Он также работает с любым количеством уровней вложенности, а не только с двумя.

Answer 2

$(".parent").children("input").click(function() {
    $(this).parent().siblings("input").attr("checked", this.checked);
});

$(".parent").siblings("input").click(function() {
    $(this).siblings("div").children("input").attr("checked",
        this.checked || $(this).siblings("input[checked]").length>0
    );
});

Answer 3

$('.parent').click(function(){
    checkBox = $(this).find('input[type=checkbox]');
    checkBox.prop("checked", !checkBox.prop("checked")); // inverse selection
});

Окончательный.

Answer 4

Это прекрасная маленькая нить, которая привела меня почти туда, где я должен быть. Я немного адаптировал код Никфа. Цель состоит в том, чтобы проверка ребенка также проверяла родителей, а отмена родительских также отменяла бы всех детей.

$ ("input [type = 'checkbox']"). Click (function () { if (! $ (this.checked)) {

$(this) 
    .next('div')
    .find("input[type='checkbox']")
    .attr("checked", this.checked)
;
}


$(this)
    .parent()  
    .prev('input[type="checkbox"]')  
    .attr("checked", this.checked || $(this).siblings("input[type='checkbox'][checked]").length > 0

    )
;

});

Как можно настроить это так, чтобы все потомки не проверялись, если родитель не проверен?

Новое все JQ и JavaScript .. Извинения.