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

问题描述 投票:0回答:3

我有三个参数,即模型,目的地和标准。每当用户从下拉列表中选择目标和条件所依赖的模型时,都会显示目标的动态复选框。当用户勾选目的地时,将显示其特定标准。这是一个后续问题: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>

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

javascript jquery html checkbox drop-down-menu
3个回答
0
投票

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

    <!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>

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

0
投票

您可以将类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
});
© www.soinside.com 2019 - 2024. All rights reserved.