如何从动态创建的复选框javascript中制作复选框事件答案

【问题标题】：How to make checkbox events from dynamically created checkbox javascript如何从动态创建的复选框javascript中制作复选框事件
【发布时间】：2018-09-13 07:51:29
【问题描述】：

我有三个参数，即模型、目的地和标准。每当用户从下拉列表中选择一个模型时，目的地和标准是依赖的，目的地的动态复选框就会显示出来。当用户勾选目的地时，将显示其特定标准。这是一个后续问题：How to display multiple list of checkboxes dynamically on dropdown list

<script type="text/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"));    
        }
    }
}
</script>

<!DOCTYPE html>
<html>
<body>

SELECT MODEL:
<select id="model" name="model" onchange="populate(this.id, 'destination')">
   <option value=""></option>
   <option value="model-a">MODEL-A</option>
   <option value="model-b">MODEL-B</option>
   <option value="model-c">MODEL-C</option>
</select>
<hr />
SELECT DESTINATION:
<div id="destination"></div>
<hr />
</body>
</html>

你能帮我添加这样的事件吗？我是新手，还在学习 javascript。

【问题讨论】：

标签： javascript jquery html checkbox drop-down-menu

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你可以试试我的解决方案：

    <!DOCTYPE html>
<html>
<head>
<script>
 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;

            //I added the below statement
            checkbox.onclick=updateCriteria;
            //I added the above statment                    

            des.appendChild(checkbox);

            var label = document.createElement('label')
            label.htmlFor = pair;
            label.appendChild(document.createTextNode(pair));

            des.appendChild(label);
            des.appendChild(document.createElement("br"));    
        }
    }
}
function updateCriteria()
{
    switch(this.value)
    {
        case "Model-A.1":alert(this.value+" is a dog.");
                         break;
        case "Model-A.2":alert(this.value+" is a cat.");
                         break;  
    }
    this.checked=false;
}
</script>
</head>
<body>

SELECT MODEL:
<select id="model" name="model" onchange="populate(this.id, 'destination');">
   <option value=""></option>
   <option value="model-a">MODEL-A</option>
   <option value="model-b">MODEL-B</option>
   <option value="model-c">MODEL-C</option>
</select>
<hr />
SELECT DESTINATION:
<div id="destination"></div>
<hr />
</body>
</html>

【讨论】：

这个过程有点像这样，但我需要显示特定的数据，比如当单击 checkbox1 时，将显示“dog”。单击 checkbox2 时，将显示“cat”。 @KNVB
它只反映选中的复选框名称。我的意思是，如果我检查，例如 Model-A.1，它将显示 Model-A.1 是一只狗。如果我检查 Model-A.2，它将显示 Model-A.2 是一只猫。 @KNVB
您可以使用 if - then - else 或 switch - case 结构来做到这一点。
有可能吗？因为标准将取决于模型和目的地@the KNVB
为什么不呢？你遇到了什么困难？

【解决方案3】：

您可以为您正在创建的复选框分配一个类 className 并编写一个应用于该类名称的事件。 checkbox.className = "class_Name"

您可以在填充方法级别编写此代码。

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

【讨论】：