Combinaison de conditions dans JavaScript

Question

J'ai 5 cases à cocher sur mon formulaire et pour chacune des cases à cocher il y a une condition séparée à valider. Et l'utilisateur peut sélectionner n'importe quel nombre de cases à cocher. Pour chacune des cases cochées, je dois exécuter la condition correspondante. Exemple

Si CheckBox1 puis condition 1

Si checkbox2 ensuite condition 2

Si checkbox3 alors la condition 3

Si CheckBox1 & checkbox2 ensuite condition 1 & condition2

Si CheckBox1 & checkbox3 puis condition 1 & condition3

Si checkbox2 & checkbox3 alors état 2 & condition3

et ainsi de suite ... Jusqu'à ce que toutes les combinaisons de tous checboxes

Je veux éviter plusieurs déclarations si quelqu'un peut me suggérer une meilleure logique pour la même en JavaScript.

TIA

Answer 1

poignée chaque condition individuellement

Vous pouvez voir à la sortie que vos "conditions" se marient avec l'état de case à cocher

function blah(checkbox1, checkbox2, checkbox3, checkbox4, checkbox5, str) { 
 
    if(checkbox1) { 
 
     str += ':condition1'; 
 
    } 
 
    if(checkbox2) { 
 
     str += ':condition2'; 
 
    } 
 
    if(checkbox3) { 
 
     str += ':condition3'; 
 
    } 
 
    if(checkbox4) { 
 
     str += ':condition4'; 
 
    } 
 
    if(checkbox5) { 
 
     str += ':condition5'; 
 
    } 
 
    return str; 
 
} 
 
console.log(blah(1, 0, 0, 0, 0, 'checkbox1')); 
 
console.log(blah(0, 1, 0, 0, 0, 'checkbox2')); 
 
console.log(blah(0, 0, 1, 0, 0, 'checkbox3')); 
 
console.log(blah(1, 1, 0, 0, 0, 'checkbox1, checkbox2')); 
 
console.log(blah(1, 0, 1, 0, 0, 'checkbox1, checkbox3')); 
 
console.log(blah(1, 1, 1, 0, 0, 'checkbox1, checkbox2, checkbox3'));

Answer 2

Vous pouvez essayer mettre chaque condition de checkbox dans sa propre fonction et stocker la fonction par lede la case à cochercomme la clé dans un objet javascript:

function run() { 
 
    var checkboxes = document.querySelectorAll('input.condition:checked') 
 

 
    var conditions = { 
 
    'one': function(data) { 
 
     return data.one; 
 
    }, 
 
    'two': function(data) { 
 
     return data.two; 
 
    }, 
 
    'three': function(data) { 
 
     return data.three; 
 
    } 
 
    }; 
 

 
    var someJson = { 
 
    'one': true, 
 
    'two': true, 
 
    'three': false 
 
    }; 
 

 
    if (!checkboxes.length) { 
 
    console.log('Please select at least one checkbox'); 
 
    return; 
 
    } 
 

 
    for (var i = 0; i < checkboxes.length; i++) { 
 
    var checkbox = checkboxes[i]; 
 
    var id = checkbox.id; 
 
    var conditionFunc = conditions[id]; 
 
    if (typeof conditionFunc !== 'function' || !conditionFunc(someJson)) { 
 
     console.log('Failed on condition for checkbox: ' + id); 
 
     return; 
 
    } 
 
    } 
 
    console.log('Completed all conditions successfully!'); 
 
}

<input type="checkbox" class="condition" id="one">One</input><br> 
 
<input type="checkbox" class="condition" id="two">Two</input><br> 
 
<input type="checkbox" class="condition" id="three">Three</input><br> 
 
<button onclick="run()">Run</button>

Answer 3

C'est ce que je ferais (pour une utilisation plus facile, il nécessite jQuery): Ajouter un attribut de données à toutes vos cases qui les couplez une condition (comme vous l'avez dit: connect1 à condition1). Stockez toutes vos conditions dans un objet, où les clés sont les numéros utilisés dans les données attributs: HTML:

<input type="checkbox" data-number="1"> 

JavaScript:

var conditions = { 
    "1": true //some condition; 
} 

Ensuite, garder une trace sur vos cases cochés:

var checked = []; 
$(".input[type='checkbox']").on("click", function(){ 
    var number = $(this).attr("data-number"); 
    var index = checked.indexOf(number); 
    if(index > -1){ 
     arr.splice(index, 1); //delete if already there (unchecked) 
    } else { 
     arr.push(index); //add if not already there (checked) 
    } 
}); 

Maintenant, comment déterminer quelles conditions doivent être appliquées: Assurez-vous de mettre le code suivant dans une fonction et toujours l'appeler, quand vous avez besoin de vérifier les conditions:

var passed = true; 
for(var i = 0; i < checked.length && passed; i++){ 
    passed = conditions[checked[i].toString()]; // Assuming that condition1, ..., condition n must be true 
} 

if(passed){ 
    alert("All conditions where true"); 
} else { 
    alert("One condition was false"); 
} 

S'il vous plaît noter: Vous pouvez redéfinir les conditions objet dès que vous vérifiez, car les manipulations dom veulent mettre à jour automatiquement les conditions objet. S'il vous plaît demander dans les commentaires si quelque chose n'est pas clair. Cette solution est capable de conditions infinies (eh bien pas plus que le nombre le plus élevé javascript est capable de par défaut mais toujours assez)