How To Make Checkbox Events From Dynamically Created Checkbox Javascript

July 28, 2023 Post a Comment

I have three parameters namely model, destination and criteria. Whenever the user chooses a model from the dropdown list, where the destination and criteria is dependent, dynamic c

Solution 1:

you can use below code to attach event to the dynamically created element

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

Solution 2:

You may try my solution:

<!DOCTYPE html><html><head><script>functionpopulate(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"];
        } elseif (mod.value == "model-b") {
            var optionArray = ["Model-B.1", "Model-B.2", "Model-B.3"];
        } elseif (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"));    
        }
    }
}
functionupdateCriteria()
{
    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:
<selectid="model"name="model"onchange="populate(this.id, 'destination');"><optionvalue=""></option><optionvalue="model-a">MODEL-A</option><optionvalue="model-b">MODEL-B</option><optionvalue="model-c">MODEL-C</option></select><hr />
SELECT DESTINATION:
<divid="destination"></div><hr /></body></html>

Solution 3:

You could assign a class className to the checkbox you're creating and write an event applying to that class name. checkbox.className = "class_Name"

You can write this code at the level of your populate method.

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

JavaScript Test

How To Make Checkbox Events From Dynamically Created Checkbox Javascript

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "How To Make Checkbox Events From Dynamically Created Checkbox Javascript"