数组索引在不应该交换时交换

Question

我目前有一个动态生成的checkbox，点击它会创建一个表格。可以在我的checkbox 上选择多个选项，并将其存储在一个数组中。我有一个用于存储不同选择的循环，例如第一个、第二个和第三个选中的选择。

复选框

1. option_one
2. option_two
3. options_three

我面临的问题是，如果我按升序选择选项，如 1>2>3，则表格会正确生成：

• Table_One
• Table_two
• Table_Three

但是，如果我按降序选择，或者将其混淆，即使这不是真的，option_one 总是最终作为第一个选择传递。

我的代码：

$(document).on("change", ".tbl_list", function () {
    var tbls = [];
    $("input:checkbox[name='tbl[]']:checked").each(function () {
        tbls.push($(this).val());
        var tbl2Name = " ";
        var tbl3Name = " ";
        var tblName = " ";
        for (i = 0; i < tbls.length; i++) {
            if (i === 0) {
                tblName = tbls[i];
            }
            if (i == 1) {
                tbl2Name = tbls[i];
            }
            if (i == 2) {
                tbl3Name = tbls[i];
            }
        }
        $("#table").html(tblName);

其中tbl_list 是checkbox 类名，tbl[] 是名称。那么为什么tblName 总是假设复选框列表中第一个对象的值呢？

Answer 1

让我们稍微分解一下，每次您的复选框更改时，您都会创建一个全新的数组

$(document).on("change", ".tbl_list", function () {
    var tbls = [];

然后你遍历所有选中的复选框来填充这个列表

$("input:checkbox[name='tbl[]']:checked").each(function () {
    tbls.push($(this).val());

jquery .each 将遍历所有选中的复选框，它按照它们在 DOM 中出现的顺序执行此操作，而不是按照您碰巧签入它们的顺序（为什么会这样？它怎么知道？ )

如果你想保留签入它们的顺序，那么你需要维护一个持久列表，并在选中时将新项目推送到列表末尾，并在选中时删除一个项目未经检查。

Answer 2

$(".checkbox").change(function() {
    if(this.checked) {
        //push into array

     else { 
       //remove from array 

    }
});

您不能只检查已选中哪个复选框并将其值添加到数组中，这样您就可以保持顺序。

Answer 3

根据建议，我做了一些修改，现在它可以按预期工作了。

var tbls = [];
$(document).on("change", ".tbl_list", function () {
    if (this.checked){
        tbls.push($(this).val());
        console.log(tbls);
        var tbl2Name = " ";
        var tbl3Name = " ";
        var tblName = " ";
        for (i = 0; i < tbls.length; i++) {
            if (i === 0) {
                tblName = tbls[i];
            }
            if (i == 1) {
                tbl2Name = tbls[i];
            }
            if (i == 2) {
                tbl3Name = tbls[i];
            }
        }
    }

        $("#table").html(tblName);
        window.sessionStorage.setItem("tblN", tblName);
        window.sessionStorage.setItem("tblN2", tbl2Name);
        window.sessionStorage.setItem("tblN3", tbl3Name);