lundi 17 septembre 2018

How to display multiple checkbox value from dynamic checkbox in javascript

I have dynamic checkboxes (destination) which are dependent to an optionlist (model) and a criteria, which is dependent to my destination. However, when I check multiple checkbox, only the last touched checkbox value is being displayed on my criteria. How can I display other checked values and remove the values which are unchecked? Please help

<script type="text/javascript">
function populate(model, destination) {
        var mod = document.getElementById(model);
        var des = document.getElementById(destination);
        des.innerHTML = "";
        if (mod.value == "LEO-A") {
            var optionArray = ["BLADE_XTI","CTL","GO", "GUZIK", "PHYSICAL_FA", "SPECIAL_DESTINATION"];
        } else if (mod.value == "LEO-A_RO") {
            var optionArray = ["BLADE_HI","GUZIK","THO_RO", "SPECIAL_DESTINATION"];
        } else if (mod.value == "LEO-B") {
            var optionArray = ["BLADE_XTI","CTL","GO", "GUZIK", "PHYSICAL_FA", "SPECIAL_DESTINATION"];
                } else if (mod.value == "LEO-B_RO") {
            var optionArray = ["BLADE_HI","GUZIK","THO_RO", "SPECIAL_DESTINATION"];
                } else if (mod.value == "LEO-C") {
            var optionArray = ["BLADE_RELI_IBIAS_SCAN","BLADE_RELI_OW_DEG","BLADE_RELI_LT", "BLADE_IAD_SCAN", "BLADE_WPTP", "BLADE_PRE_STRESS_OP", "BLADE_XTI", "CTL", "FJ_HDD", "GO", "GUZIK", "HAST", "LLP", "MRT", "MSL", "NACL", "PHYSICAL_FA", "PHYSICAL_TEM", "SPECIAL_DESTINATION"];
                } else if (mod.value == "LEO-C_RO") {
            var optionArray = ["BLADE_HI","GUZIK","THO_RO", "SPECIAL_DESTINATION"];
                } else if (mod.value == "LEO-D_RO") {
            var optionArray = ["BLADE_HI","GUZIK","THO_RO", "SPECIAL_DESTINATION"];
                } else if (mod.value == "PMR+") {
            var optionArray = ["BLADE_RELI_IBIAS_SCAN","BLADE_RELI_OW_DEG","BLADE_RELI_LT", "BLADE_IAD_SCAN", "BLADE_QPTP", "BLADE_PRE_STRESS_OP", "BLADE_XTI", "GO", "GUZIK", "HAST", "LLP", "MRT", "MSL", "NACL", "PHYSICAL_FA", "PHYSICAL_TEM", "SPECIAL_DESTINATION"];
                } else if (mod.value == "VELA") {
            var optionArray = ["BLADE_XTI","CTL","GO", "GUZIK", "PHYSICAL_FA", "SPECIAL_DESTINATION"];
        
    }

    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;
            checkbox.onclick=updateCriteria;
                                
            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()
{
        var text
        var cri = document.getElementById("criteria").value
        
    switch(this.value)
    {
        case "BLADE_XTI": text = "Top 60% (D0-60, SER vs MCW)";
                         break;
        case "CTL": text = "Top 40% (D0-40, SER vs MCW)";
                         break;
                case "GO": text = "MCW Target +/-3nm";
                         break; 
                case "GUZIK": text = "Top 40% (D0-40, SER vs MCW)";
                         break; 
                case "PHYSICAL_FA": text = "MCW Target +/-3nm";
                         break; 
                case "SPECIAL_DESTINATION": text = "see REMARKS";
                         break;                         
    }
        document.getElementById("criteria").innerHTML = text;

}
 
</script>



Aucun commentaire:

Enregistrer un commentaire