在jQuery手风琴中维护复选框状态

时间:2011-10-19 20:58:27

标签: javascript jquery

我有一个带有复选框的嵌套手风琴,如果选中则会调用ajax,问题是在手风琴扩展后复选框不会保持检查状态。

if (childList.length > 0) {

                list += '<ul class = ui-accordion>';
                for (var j = 0; j < childList.length; j++) {

                    list += '<li><div><a href="#"><input type = "checkbox" class = "reqCheckBox" value="' + childList[i].ComponentID + '"/> ' + childList[j].ComponentDesc +'</a></div>';

                    var grandChildList = $.grep(data, function (n, k) {
                        return n.ParentID == childList[j].ComponentID;
                    }, false);

                    if (grandChildList.length > 0) {

                        list += '<ul class = ui-accordion>';


                        for (var k = 0; k < grandChildList.length; k++) {
                            list += '<li><div><a href="#"><input type = "checkbox" onclick="getReq(' + grandChildList[i].ComponentID + ')"/>' + grandChildList[k].ComponentDesc + '</a></div>';

                            var greatGrandChildList = $.grep(data, function (n, l) {
                                return n.ParentID == grandChildList[k].ComponentID;
                            }, false);

                            if (greatGrandChildList.length > 0) {

                                list += '<ul class = ui-accordion>';

                                for (var l = 0; l < greatGrandChildList.length; l++) {
                                    list += '<li><div><a href="#"><input type = "checkbox" onclick="getReq(' + greatGrandChildList[i].ComponentID + ')"/>' + greatGrandChildList[l].ComponentDesc + '</a></div>';
                                }

                                list += '</li></ul>';
                            }
                        }

                        list += '</li></ul>';**

我知道我需要让这个不引人注目,但对我的JavaScript代码的任何批评都会受到赞赏,因为我是一个菜鸟。谢谢!

3 个答案:

答案 0 :(得分:1)

您需要保留复选框的值。因此,当您检查它时,您的ajax calback需要更新属性的值。这种方式当手风琴扩展时,它会持续复选框的状态。

答案 1 :(得分:0)

我通过添加此功能来维护复选框状态

        $("a").click(function (event) {
        event.stopPropagation();
        });
    });

答案 2 :(得分:0)

以下作品。

$("#accordion h3 input").click(function(event) { 
 event.stopPropagation(); 
});