Question

我有一组动态构建的复选框（主类别的子类别）。

<input type="checkbox" name="SubCats" class="subcat-checkbox" value="18001700">first</input>
<input type="checkbox" name="SubCats" class="subcat-checkbox" value="18001800">second</input>
<input type="checkbox" name="SubCats" class="subcat-checkbox" value="18001900">third</input>
<input type="checkbox" name="SubCats" class="subcat-checkbox" value="18002000">forth</input>

现在，当我提交表单时，当我从Server返回表单时（例如，如果没有通过验证），我希望能够使用它们的值重建该复选框列表。假设用户检查了前两个复选框我想要这样的东西：

<input type="checkbox" name="SubCats" class="subcat-checkbox" value="18001700" checked>first</input>
<input type="checkbox" name="SubCats" class="subcat-checkbox" value="18001800" checked>second</input>
<input type="checkbox" name="SubCats" class="subcat-checkbox" value="18001900">third</input>
<input type="checkbox" name="SubCats" class="subcat-checkbox" value="18002000">forth</input>

我认为我这样做是第一件事：

(document).ready(function () {

    loadSubCategories();
}

我正在使用ASP.NET MVC，我无法弄清楚如何将这些信息传递到View（HTML）中。我认为这是Web开发中的常见任务。一般情况如何？

Answer 1

您可以使用网络浏览器提供的 localStorage 来存储javascript变量，以保存复选框的状态，并在重新加载网页时恢复状态。

我就这样做了：

function save() {
    var elems = document.getElementsByName("SubCats");
    var states = [];
    for (i = 0; i < elems.length; i++) {
        states.push(elems[i].checked);
    }

    localStorage.setItem("checkboxStates", JSON.stringify(states));
}

function restore() {
    if (localStorage.getItem("checkboxStates") !== null) {
        var states = JSON.parse(localStorage.getItem("checkboxStates"));
        var elems = document.getElementsByName("SubCats");
        for (i = 0; i < elems.length; i++) {
            elems[i].checked = states[i];
        }
    }
}

restore();

Here is the JSFiddle demo

在演示中，您可以选中自己喜欢的复选框，然后点击Save states按钮。当您重新运行代码时，您将看到它保留以前的设置。

流程：

当您单击Save states按钮时，将调用save()函数，并按顺序构建一个复选框状态数组，并在将它们存储在 localStorage 之前对其进行序列化。

再次加载页面时，默认情况下会触发restore()功能。这将检查之前是否保存了状态。如果有，则将其反序列化，然后遍历可用的复选框，将状态设置为先前保存的状态。

另请注意，可以在任何页面上访问存储在 localStorage 中的信息，因此数据始终可用。

您还可以阅读 sessionStorage 。

Answer 2

谢谢大家的帮助。这些都是有趣的建议，尤其是使用localStorage的建议，我从未使用过，也许我应该看看。

无论如何，我决定采取天真的方式。我将选中的子类别保存在以逗号分隔的隐藏文本字段中，然后在再次构建标记时，我检查每个子类别是否已经过检查。

这是我的代码：

function loadSubCategories() {
    if ($("#ddlCategory").val() != "-1") {
        var SubCatsCheckboxes = {};
        SubCatsCheckboxes.url = "/BLHelpers/GetSubCats";
        SubCatsCheckboxes.type = "POST";
        SubCatsCheckboxes.data = JSON.stringify({ CategoryId: $("#ddlCategory").val() });
        SubCatsCheckboxes.datatype = "json";
        SubCatsCheckboxes.contentType = "application/json";
        SubCatsCheckboxes.success = function (SubCatsList) {
            var sub_cats = $("#SubCatsStr").val().split(",");
            $("#SubCatsDiv").empty();
            $.each(SubCatsList, function (index, value) {
                var option_to_append = "<input type=\"checkbox\" name=\"SubCats\" class=\"subcat-checkbox\" value=\"" + value.SubCategoryId + "\"";
                if ($.inArray(value.SubCategoryId.toString(), sub_cats) != -1) {
                    option_to_append += " checked "
                }
                option_to_append += ">" + value.Caption + "</option><br/>";
                $("#SubCatsDiv").append(option_to_append);
            });
        };
        $.ajax(SubCatsCheckboxes);
    }
    else {
        $("#SubCatsDiv").empty();
    }
}

其中：

<input id="SubCatsStr" name="SubCatsStr" type="hidden" value="@Model.SubCatsStr" />

是我隐藏的字段，用于保存选中的子类别ID。

检索动态构建的复选框的值

2 个答案: