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