在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代码的批评也会很感激,因为我是一个新手。谢谢!

您需要的是保存复选框的值。因此,当您检查它时,ajax回调需要更新属性的值。这样,当手风琴展开时,它将保留复选框的状态。

我通过添加这个函数来维护复选框状态

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

以下作品

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

最新更新