Question

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

复选框

option_one
option_two
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

在提出建议后，我做了一些修改，现在按预期工作。

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);

Answer 3

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

     else { 
       //remove from array 

    }
});

不能只检查选中了哪个复选框，并将其值添加到数组中，这样就可以保留订单。

数组索引交换时不应该

3 个答案: