Question

我一直在搜索网站寻找解决方案，但是我没有运气让它工作。这段代码的最终结果是隐藏和显示带有复选框的表格上的行 - 复选框默认设置为选中，因为默认情况下表格全部显示，代码末尾是我当前的方法试图让复选框激活。

function searchContents(table, noRows) {
    document.getElementById('dynamicSearchContents').innerHTML = "";
    //locals declarations
    var i;
    var checkboxes = [];
    //labels
    var lables = [];
    var bikesTableRows = ["Bike ID", "Bike Status", "Bike Cost", "Bike type", "Last Maintainance", "Lock Code", "Depot"];
    var staffTableRows = ["Staff ID", "Fullname", "Role", "DOB", "Full Address", "Mobile", "Landline", "Email", "Notes"];
    var repairTableRows = ["Repair ID", "Bike ID", "Fault", "Reported Data", "Repair Started", "Reapir Completed", "Parts Required", "Assigned Mechanic", "Repair Notes"];
    var customerTableRows = ["Customer ID", "Fullname", "DOB", "Full Address", "Mobile", "Landline", "Email", "Notes"];
    var collectionsTableRows = ["Job ID", "Collection Depot", "Delivery Depot", "Time and Date Started", "Time and Date Completed", "Assigned Driver"];

    for (i = 0; i < noRows; i++) {
        //creation
        var br = document.createElement("br");
        checkboxes[i] = document.createElement('input');
        lables[i] = document.createElement('label');

        //setting
        checkboxes[i].type = "checkbox";
        checkboxes[i].name = "checkbox" + i;
        checkboxes[i].value = "value";
        checkboxes[i].checked = "true";
        checkboxes[i].class = "checkboxClass"
        checkboxes[i].id = "checkbox" + i;
        lables[i].htmlFor = "checkbox" + i;

        //what lables
        if (table === "bikeInnerTable") {
            console.log("Bikes Lables")
            lables[i].appendChild(document.createTextNode(bikesTableRows[i]));
        }else if (table === "staffInnerTable") {
            console.log("Staff Lables")
            lables[i].appendChild(document.createTextNode(staffTableRows[i]));
        }else if (table === "repairInnerTable") {
            console.log("Repair Lables")
            lables[i].appendChild(document.createTextNode(repairTableRows[i]));
        }else if (table === "customerInnerTable") {
            console.log("Customer Lables")
            lables[i].appendChild(document.createTextNode(customerTableRows[i]));
        }else if (table === "collectionsInnerTable") {
            console.log("Collections Lables")
            lables[i].appendChild(document.createTextNode(collectionsTableRows[i]));
        }

        //appending
        document.getElementById('dynamicSearchContents').appendChild(lables[i]);
        document.getElementById('dynamicSearchContents').appendChild(checkboxes[i]);
        document.getElementById('dynamicSearchContents').appendChild(br);
}



$('.checkboxClass').on('change', function(){ // on change of state
   if(this.checked) // if changed state is "CHECKED"
        {
            console.log("blahahaha");
        }
    });

}

编辑：按下一个按钮，它位于每个表上，它调用一个函数来显示搜索/过滤器div，以及下面的代码来填充它的内容

Answer 1

在函数的jquery中传递第三个参数，如下所示：

$('body').on('change', '.checkboxClass', function(){ // on change of state
   if(this.checked) // if changed state is "CHECKED"
        {
            console.log("blahahaha");
        }
    });
}

这将使用为此同一函数创建的'.checkboxClass'绑定任何将来的元素。

无法动态创建复选框才能工作

1 个答案: