How to make checkbox events from dynamically created checkbox javascript

Question

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 checkboxes for the destination is shown. And when a user tick a destination, its specific criteria will show. This is a follow up question: 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>

Can you help me with adding such events. Iam new and still learning javascript.

Uttam Gupta · Accepted Answer · 2018-09-13 08:12:40Z

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

answered Sep 13, 2018 at 8:12

Uttam Gupta

5182 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

The KNVB · Accepted Answer · 2018-09-18 02:50:38Z

0

You may try my solution:

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

edited Sep 18, 2018 at 2:50

answered Sep 13, 2018 at 8:11

The KNVB

3,8523 gold badges35 silver badges64 bronze badges

11 Comments

hevhev011717 Over a year ago

the process is somehow like that but I need to display specific data like when checkbox1 is clicked, "dog" will be displayed. When checkbox2 is clicked, "cat" will be displayed. @the KNVB

hevhev011717 Over a year ago

it only mirrors the selected checkbox name. What I mean is that if I check, for example the Model-A.1, it will show that Model-A.1 is a dog. If I check Model-A.2, it will show that Model-A.2 is a cat. @the KNVB

The KNVB Over a year ago

you can use if - then - else or switch - case structure to do so.

hevhev011717 Over a year ago

is it possible? since the criteria will be dependent on the model and destination @the KNVB

The KNVB Over a year ago

Why not? Any difficulties you facing?

|

Malay Thakershi · Accepted Answer · 2018-09-13 08:08:26Z

0

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

answered Sep 13, 2018 at 8:08

Malay Thakershi

1471 silver badge9 bronze badges

Collectives™ on Stack Overflow

How to make checkbox events from dynamically created checkbox javascript

3 Answers 3

Comments

11 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related