如何从动态创建的复选框javascript中创建复选框事件

我有三个参数，即模型，目的地和标准。 每当用户从下拉列表中选择目标和条件所依赖的模型时，都会显示目标的动态复选框。 当用户勾选目的地时，将显示其特定标准。 这是一个后续问题： 如何在下拉列表中动态显示多个复选框列表

 function populate(model, destination) { var mod = document.getElementById(model); var des = document.getElementById(destination); des.innerHTML = ""; if (mod.value == "model-a") { var optionArray = ["Model-A.1", "Model-A.2", "Model-A.3"]; } else if (mod.value == "model-b") { var optionArray = ["Model-B.1", "Model-B.2", "Model-B.3"]; } else if (mod.value == "model-c") { var optionArray = ["Model-C.1", "Model-C.2", "Model-C.3"]; } for (var option in optionArray) { if (optionArray.hasOwnProperty(option)) { var pair = optionArray[option]; var checkbox = document.createElement("input"); checkbox.type = "checkbox"; checkbox.name = pair; checkbox.value = pair; des.appendChild(checkbox); var label = document.createElement('label') label.htmlFor = pair; label.appendChild(document.createTextNode(pair)); des.appendChild(label); des.appendChild(document.createElement("br")); } } }  

    SELECT MODEL:   MODEL-A MODEL-B MODEL-C  
 SELECT DESTINATION: 
 
   

你能帮我添加这样的活动吗？ Iam新的，仍在学习javascript。

Answer 1

您可以尝试我的解决方案：

        SELECT MODEL:   MODEL-A MODEL-B MODEL-C  
 SELECT DESTINATION: 
 
   

Answer 2

您可以使用下面的代码将事件附加到动态创建的元素

 var checkbox = document.createElement("input"); checkbox.type = "checkbox"; checkbox.name = pair; checkbox.value = pair; checkbox.id = "desCheckBox"; des.appendChild(checkbox); //eventname is name of the event // here id is "desCheckBox" document.addEventListener('eventname', function (e) { if (e.target && e.target.id == 'id') { // do something } }); 

Answer 3

您可以将类className分配给您正在创建的复选框，并编写应用于该类名的事件。 checkbox.className =“class_Name”

您可以在populate方法的级别编写此代码。

 $(".class_Name").unbind(); $(".class_Name").on("change", function () { //this will give you access to the checkbox item being changed });