Comment créer un EventListener qui gère plusieurs check box ? (jQuery)


#1

Bonjour,

Voici l’idée que je compte mettre en place : j’ai 2 checkbox (cases à cocher) qui permettent d’afficher des informations sous forme texte ou sous forme de chiffre, l’utilisateur a le choix :

  • soit il selectionne une checkbox et il aura l’affichage soit en chiffre ou en texte.
  • soit il selectionne les 2 checkbox et il affiche “texte_code”.
    Code HTML :
<div class="col-sm-6">
       <label for="affChiffre" id="choix_code">Affichage par chiffres :</label>
       <input type="checkbox" id="affChiffre" name="affChiffre" checked="">
</div>
<div class="col-sm-6">    
        <label for="affNom" id="choix_nom">Affichage par nom :</label>
        <input type="checkbox" id="affNom" name="affNom" checked="">
</div>

Je voudrai rajouter un eventlistner qui me gère les 2 checkbox, j’ai pensé à cette utilisation mais sans résultat :

  • Pour un affichage “texte_chiffre” :
if( $('input[name=affNom]').is(':checked') ){
   if( $('input[name=affChiffre]').is(':checked') ){
       document.getElementById("[type:checkbox]").on("click", function());
       /// Mon traitement ///
   }
}
  • Pour un affichage texte :
if( $('input[name=affNom]').is(':checked') ){
   if( $('input[name=affChiffre]').is(':not(:checked)') ){
       document.getElementById("[type:checkbox]").on("click", function());
       /// Mon traitement ///
   }
}

Je prends toute remarques constructive pour la suite de mon problème.
Si avez-vous une idée de résolution ou une construction similaire, je suis intéressé ;) !!

En remerciant d’avance toute intervention.

MZW.


#2

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


#3

Merci Beaucoup pour tes indications, j’ai adapté le script jQuery.
Merci aussi pour l’utilisation des 2 autres framework JS.