Problème 1
Je vois ici que tes conditions sont exécutées en dehors d’un événement ce qui signifie que le code :
if( $('input[name=affNom]').is(':checked') ){
/* ... */
}
if( $('input[name=affNom]').is(':checked') ){
/* ... */
}
ne sera exécuté qu’une fois : au moment ou le fichier JavaScript sera chargé et le code exécuté. Comme au moment de la lecture de ce code j’imagine que les deux checkboxs sont dans un état « non cochée », alors aucun de tes événements « click » n’auront d’abonnement, autrement dit il ne se passera jamais rien quand on cliquera dessus.
Problème 2
document.getElementById("[type:checkbox]") comme son nom l’indique récupère un nœud du DOM en utilisant son id. Comme un id à une valeur unique à travers tous les éléments du DOM, il renvoi uniquement un seul objet. Il prend en premier paramètre une string qui est l’exacte contenu de la balise id, dans ton cas, aucune balise ne contient id="[type=checkbox]". Ce dont tu as besoin c’est : document.querySelectorAll("[type=checkbox]") qui te renverra un tableau de nœud sur lequel il faudra ensuite itérer. Cependant, puisque tu utilises jQuery, autant rester consistant avec simplement l’utilisation de $("[type=checkbox]").
Problème 3 et 4
La fonction pour abonner un élément à un événement du DOM sur un nœud natif récupéré avec document.getElement(s)By* ou querySelector(All) n’est pas la fonction on mais la fonction addEventListener.
Également, un funarg (argument de fonctio aussi appelé callback (fonction de retour) utilise la syntaxe des expressions de fonctions (ou des fonctions fléchées) ce qui signifie que function () sans les {, } va planter (car ce n’est pas une syntaxe acceptée). Et, en réalité, ton traitement doit être placé dans le corps de ta fonction de retour.
Ex :
document.getElementById("choix_code").addEventListener("click", function() {
/* Mon traitement */
});
Voici plusieurs manière d’implémenter ce que tu as décrit dans ton post plus haut :
Avec Vue :
Voici ce que cela donnerai avec la bibliothèque Vue :
Exemple live : http://codepen.io/Haeresis/pen/JWovjm?editors=1010
Code source :
<div class="example">
<div class="choice">
<label>
<input type="checkbox" v-model="choiceNumber" />
En nombre
</label>
<label>
<input type="checkbox" v-model="choiceString" />
En lettre
</label>
</div>
<div class="result">
<div v-if="choiceNumber && choiceString" class="all">
texte_code
</div>
<div v-else-if="choiceNumber" class="number">
1, 2, 3
</div>
<div v-else-if="choiceString" class="string">
un, deux, trois
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<script>
new Vue({
el: ".example",
data: {
choiceNumber: false,
choiceString: false
}
});
</script>
Avec jQuery :
Voici ce que cela donnerai avec la bibliothèque jQuery:
Exemple live : http://codepen.io/Haeresis/pen/ryavOd?editors=1010
Code source :
<div class="example">
<div class="choice">
<label>
<input type="checkbox" class="choice-number" />
En nombre
</label>
<label>
<input type="checkbox" class="choice-string" />
En lettre
</label>
</div>
<div class="result">
<div class="all">
texte_code
</div>
<div class="number">
1, 2, 3
</div>
<div class="string">
un, deux, trois
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var $inputNumber = $(".choice-number"),
$inputString = $(".choice-string"),
$outputNumber = $(".number"),
$outputString = $(".string"),
$outputAll = $(".all"),
$result = $(".result");
function initResult() {
$outputNumber.remove();
$outputString.remove();
$outputAll.remove();
}
initResult();
$inputNumber.add($inputString).click(function () {
var choiceNumber = $inputNumber.is(":checked"),
choiceString = $inputString.is(":checked");
initResult();
if (choiceNumber && choiceString) {
$result.html($outputAll);
} else if (choiceNumber) {
$result.html($outputNumber);
} else if (choiceString) {
$result.html($outputString);
}
});
</script>
Avec Vanilla :
Voici ce que cela donnerai sans aucune bibliothèque (seulement en pure JS) :
Exemple live : http://codepen.io/Haeresis/pen/EWaLvO
Code source :
<div class="example">
<div class="choice">
<label>
<input type="checkbox" class="choice-number" />
En nombre
</label>
<label>
<input type="checkbox" class="choice-string" />
En lettre
</label>
</div>
<div class="result">
<div class="all">
texte_code
</div>
<div class="number">
1, 2, 3
</div>
<div class="string">
un, deux, trois
</div>
</div>
</div>
<script>
var inputNumber = document.getElementsByClassName("choice-number")[0],
inputString = document.getElementsByClassName("choice-string")[0],
outputNumber = document.getElementsByClassName("number")[0],
outputString = document.getElementsByClassName("string")[0],
outputAll = document.getElementsByClassName("all")[0],
result = document.getElementsByClassName("result")[0];
function initResult() {
outputNumber.parentNode && outputNumber.parentNode.removeChild(outputNumber);
outputString.parentNode && outputString.parentNode.removeChild(outputString);
outputAll.parentNode && outputAll.parentNode.removeChild(outputAll);
}
function displayResult() {
var choiceNumber = inputNumber.checked == true,
choiceString = inputString.checked == true;
initResult();
if (choiceNumber && choiceString) {
result.appendChild(outputAll);
} else if (choiceNumber) {
result.appendChild(outputNumber);
} else if (choiceString) {
result.appendChild(outputString);
}
}
initResult();
inputNumber.addEventListener("click", displayResult);
inputString.addEventListener("click", displayResult);
</script>
En espérant t’avoir aidé !
