Fatal编程技术网
  • javascript/
  • 如何从动态创建的复选框javascript生成复选框事件

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

javascript jquery html checkbox drop-down-menu

如何从动态创建的复选框javascript生成复选框事件,javascript,jquery,html,checkbox,drop-down-menu,Javascript,Jquery,Html,Checkbox,Drop Down Menu,我有三个参数，即模型、目的地和标准。每当用户从下拉列表中选择一个模型时（目标和条件是相关的），就会显示目标的动态复选框。当用户勾选目的地时，将显示其特定条件。这是一个后续问题： 函数填充（模型、目标）{ var mod=document.getElementById（模型）； var des=document.getElementById（目的地）； des.innerHTML=“”； 如果（mod.value==“a型”）{ var optionArray=[“A.1型”、“A.2型”、“

我有三个参数，即模型、目的地和标准。每当用户从下拉列表中选择一个模型时（目标和条件是相关的），就会显示目标的动态复选框。当用户勾选目的地时，将显示其特定条件。这是一个后续问题：


函数填充（模型、目标）{
var mod=document.getElementById（模型）；
var des=document.getElementById（目的地）；
des.innerHTML=“”；
如果（mod.value==“a型”）{
var optionArray=[“A.1型”、“A.2型”、“A.3型”]；
}否则，如果（模型值=“b型”）{
var optionArray=[“模型B.1”、“模型B.2”、“模型B.3”]；
}否则如果（mod.value==“c型”）{
var optionArray=[“型号C.1”、“型号C.2”、“型号C.3”]；
}
for（optionArray中的var选项）{
if（optionArray.hasOwnProperty（option））{
var对=optionArray[选项]；
var checkbox=document.createElement（“输入”）；
checkbox.type=“checkbox”；
checkbox.name=pair；
checkbox.value=pair；
des.appendChild（复选框）；
var label=document.createElement（'label'）
label.htmlFor=pair；
label.appendChild（document.createTextNode（对））；
des.appendChild（标签）；
des.appendChild（document.createElement（“br”））；
}
}
}


选择型号：
A型
B型
C型


选择目的地：
您可以为正在创建的复选框指定一个类名，并编写一个应用于该类名的事件。checkbox.className=“class\u Name”

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

$(".class_Name").unbind();
$(".class_Name").on("change", function () {
   //this will give you access to the checkbox item being changed
});
您可以尝试我的解决方案：

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


函数填充（模型、目标）{
var mod=document.getElementById（模型）；
var des=document.getElementById（目的地）；
des.innerHTML=“”；
如果（mod.value==“a型”）{
var optionArray=[“A.1型”、“A.2型”、“A.3型”]；
}否则，如果（模型值=“b型”）{
var optionArray=[“模型B.1”、“模型B.2”、“模型B.3”]；
}否则如果（mod.value==“c型”）{
var optionArray=[“型号C.1”、“型号C.2”、“型号C.3”]；
}
for（optionArray中的var选项）{
if（optionArray.hasOwnProperty（option））{
var对=optionArray[选项]；
var checkbox=document.createElement（“输入”）；
checkbox.type=“checkbox”；
checkbox.name=pair；
checkbox.value=pair；
//我补充了以下声明
checkbox.onclick=updateCriteria；
//我加了上面的陈述
des.appendChild（复选框）；
var label=document.createElement（'label'）
label.htmlFor=pair；
label.appendChild（document.createTextNode（对））；
des.appendChild（标签）；
des.appendChild（document.createElement（“br”））；
}
}
}
函数updateCriteria（）
{
开关（此值）
{
案例“Model-A.1”：警报（此.value+“是一只狗”）；
打破
案例“Model-A.2”：警报（此.value+“是一只猫”）；
打破
}
这个.checked=false；
}
选择型号：
A型
B型
C型


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

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
                    }
                });
这个过程在某种程度上是这样的，但我需要显示特定的数据，比如当单击checkbox1时，将显示“dog”。单击复选框2时，将显示“cat”@KNVB位仅镜像选定的复选框名称。我的意思是，如果我检查，例如模型A.1，它将显示模型A.1是一只狗。如果我检查型号A.2，它将显示型号A.2是一只猫@KNVByou可以使用if-then-else或switch-case结构来实现这一点。可能吗？由于标准将取决于KNVBW的型号和目的地，为什么不？你面临什么困难？