Вопрос по jquery – CheckAll CheckBox Jquery

2

Я использовал этот код, чтобы установить флажок в виде дерева.

HTML:

<div id="tree">
    <ul>
        <li>
            <input type="checkbox"/> Root
            <ul>
                <li>
                    <input type="checkbox"/> Child 1
                    <ul>
                        <li><input type="checkbox"/> Subchild 1</li>
                        <li><input type="checkbox"/> Subchild 2</li>
                        <li><input type="checkbox"/> Subchild 3</li>
                    </ul>
                </li>
                <li>
                    <input type="checkbox"/> Child 2
                    <ul>
                        <li><input type="checkbox"/> Subchild 1</li>
                        <li><input type="checkbox"/> Subchild 2</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>​

JavaScript:

$(document).ready(function() {
    $("#tree input:checkbox").change(function() {
        var val = $(this).attr("checked");
        $(this).parent().find("input:checkbox").each(function() {
            if (val) {
                $(this).attr("checked", "checked");
            } else {
                $(this).removeAttr("checked");
            }
        });
    });
});​

JSFiddle: http://jsfiddle.net/jRAcq/

это хорошо работает Но если какой-либо из подузлов не проверен, то корневой / дочерний корень не будет проверен. Как я могу сделать это?

Чтобы уточнить, если я нажимаю на Root, а затем на Sub child 1, должны ли быть отключены Child 1 и Root? mattytommo
Должен ли рут действительно быть непроверенным? Я так не думаю. Это означало бы, что ни один ребенок не проверен. Если все дочерние элементы не проверены, то также должен быть отключен корень. Но не раньше. Это мои 2 цента. Antonio Louro

Ваш Ответ

2   ответа
1
    $(document).ready(function () {
                $.extend($.expr[':'], {
                    unchecked: function (obj) {
                        return ((obj.type == 'checkbox' || obj.type == 'radio') && !$(obj).is(':checked'));
                    }
                });

                $("#tree input:checkbox").live('change', function () {
                    $(this).next('ul').find('input:checkbox').prop('checked', $(this).prop("checked"));

                    for (var i = $('#tree').find('ul').length - 1; i >= 0; i--) {
                        $('#tree').find('ul:eq(' + i + ')').prev('input:checkbox').prop('checked', function () {
                            return $(this).next('ul').find('input:unchecked').length === 0 ? true : false;
                        });
                    }
                });
            });

для живого демо смотрите эту ссылку:http://jsfiddle.net/nanoquantumtech/JfMCP/

//Или же

        $(document).ready(function () {
            $.extend($.expr[':'], {
                unchecked: function (obj) {
                    return ((obj.type == 'checkbox' || obj.type == 'radio') && !$(obj).is(':checked'));
                }
            });

            jQuery.fn.reverse = [].reverse;

            $("#tree input:checkbox").live('change', function () {
                $(this).next('ul').find('input:checkbox').prop('checked', $(this).prop("checked"));

                $('#tree').find("input:checkbox + ul").reverse().each(function () {
                    $(this).prev('input:checkbox').prop('checked', $(this).find('input:unchecked').length === 0 ? true : false);
                });
            });
        });

//==================================================================================//

в соответствии с вашим HTML-кодом JQuery ниже:

$(document).ready(function () {
            $.extend($.expr[':'], {
                unchecked: function (obj) {
                    return ((obj.type == 'checkbox' || obj.type == 'radio') && !$(obj).is(':checked'));
                }
            });

            jQuery.fn.reverse = [].reverse;

            $('#PagesTree').find('input:checkbox').live('change', function () {
                $('#' + $(this).attr('name').replace(/CheckBox/g, '') + 'Nodes').find('input:checkbox').prop('checked', $(this).prop("checked"));

                $('#PagesTree').find('input:checkbox').reverse().each(function () {
                    var obj = $('#' + $(this).attr('name').replace(/CheckBox/g, '') + 'Nodes');
                    if (obj.find('input:checkbox').length > 0)
                        $(this).prop('checked', obj.find('input:unchecked').length === 0 ? true : false);
                });
            });
        });

для живого демо смотрите эту ссылку:http://jsfiddle.net/nanoquantumtech/GmT7U/

Error: User Rate Limit Exceededsourcepod.com/tzjfsx87-7542 Techonthenet
Error: User Rate Limit Exceeded Techonthenet
Error: User Rate Limit Exceeded
1

Попробуй это...

$(document).ready(function() {
$("#tree input:checkbox").change(function() {
    var val = $(this).attr("checked");
    $(this).parent().find("input:checkbox").each(function() {
        if (val) {
            $(this).attr("checked", "checked");
        } else {
            $(this).removeAttr("checked");
            $(this).parents('ul').each(function(){
                $(this).prev('input:checkbox').removeAttr("checked");
             });
        }
    });
});

});

Error: User Rate Limit Exceededhamidseta.blogspot.in/2012/01/… Techonthenet
Error: User Rate Limit Exceeded Techonthenet
.parent().parent().prev()Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded

Похожие вопросы