Selection de div en fonction de checkbox

13 novembre 2017 à 23:04:28

Bonjour,

Je cherche a faire afficher des div en fonction des checkbox qui sont cochés. Avec la possibilité de combiner plusieurs checkbox afin de donner un résultat différent.

Par exemple si je coche AA alors j'affiche seulement le resultat AA. Si je coche AA+DD alors j'affiche seulement le résultat AA+DD...

Au début je voulais faire une condition pour chaque possibilités donc 16 conditions mais c'est nulle. Est-ce que quelqu'un aurait une idée de comment je peux faire ça plus proprement ou un conseil ? svp

D'avance merci

<!DOCTYPE html>

<html>

<head>

    <title>Hello World!</title>

</head>


<body>


    <script>
function MyFunction() {
var allInputs = document.getElementsByTagName("input");
for (var i = 0, max = allInputs.length; i < max; i++){
if (allInputs[i].type === 'checkbox' && allInputs[i].checked === true){
var y = document.getElementsByClassName("result");
for (var j = 0; j < y.length; j++) {

var test = new RegExp(allInputs[i],'g');
console.log(y[j].innerHTML.match(/.*test/));
if(y[j].innerHTML.match(/.*test/))
{
}  
}
}
}
}
    </script>
	
<input onclick="MyFunction()" type="checkbox" id="subscribeNews" name="subscribe" value="AA"> AA <br/>
<input onclick="MyFunction()" type="checkbox" id="subscribeNews" name="subscribe" value="BB"> BB <br/>
<input onclick="MyFunction()" type="checkbox" id="subscribeNews" name="subscribe" value="CC"> CC <br/>
<input onclick="MyFunction()" type="checkbox" id="subscribeNews" name="subscribe" value="DD"> DD <br/>

<div id=0 class="result"> none </div>
<div id=1 class="result"> AA </div>
<div id=2 class="result"> BB </div>
<div id=3 class="result"> CC </div>
<div id=4 class="result"> DD </div>

<div id=5 class="result"> AA+BB </div>
<div id=6 class="result"> AA+CC </div>
<div id=7 class="result"> AA+DD </div>
<div id=8 class="result"> BB+CC </div>
<div id=9 class="result"> BB+DD </div>
<div id=10 class="result"> CC+DD </div>

<div id=11 class="result"> BB+CC+DD </div>
<div id=12 class="result"> AA+CC+DD </div>
<div id=13 class="result"> AA+BB+DD </div>
<div id=14 class="result"> AA+BB+CC </div>

<div id=16 class="result"> AA+BB+CC+DD </div>
</body>

</html>

LCaba

14 novembre 2017 à 0:38:26

Salut

Ce qui est nul c'est de créér une div par résultat possible

Au lieu de cela, tu devrais utiliser une seule div et modifier son contenu selon les inputs qui sont cochés.

Tu peux utiliser querySelectorAll avec le sélecteur "input:checked" pour récupérer la liste des input cochés.

Par ailleurs onclick n'est pas le bon événement. Clique sur un input, puis appuie sur la barre d'espace pour comprendre pourquoi.

Tes 4 inputs on le même id, c'est invalide.

-
Edité par LCaba 14 novembre 2017 à 0:52:27

Cabinet vétérinaire à Angers

tino242424

14 novembre 2017 à 10:53:15

Salut LCaba,

Merci pour ta réponse.

Je vais chercher du coté de ce querySelector si j'arrive a faire quelque chose et je vous tiendrai au courrant.

Tu as raison pour le onclick et les memes id, je vais changer ça.

En fait j'ai mis 1 div par combinaison car le résultat sera une image et un tableau et donc je pense que c'est plus facile d'afficher et bloquer des div plutôt que de changer les valeurs du tableau et les images ?

LCaba

14 novembre 2017 à 13:26:53

Attention c'est querySelectorAll pas querySelector. Le premier renvoie une nodeList avec tous les éléments qui correspondent alors que le second s'arrête au premier élément trouvé et te le renvoie

Pour une image il suffit de changer son attribut src, et pour un texte il suffit de changer le textContent

Cabinet vétérinaire à Angers

tino242424

21 novembre 2017 à 16:16:41

Re,

Merci beaucoup pour tes conseils LCaba, en fait je ne peux pas modifier l'attribut src de l'image que les images seront générées automatiquement et avec des noms que je ne pourrais pas prévoir. C'est pour ça que je voulais utiliser le blockage de div.

Je ne sais pas si c'est trop propre de faire de cette maniere mais en tout cas ça marche :-)

https://jsfiddle.net/53e260eL/1/

<body>
<div class="container-fluid">
<div>
<div class="row">
<div class="col-sm-12">
<h3>
Show Graph and Table</h3>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<input onchange="myFunction()" class="checkboxtest" type="checkbox" name='AA'" id="type: AA" /> <label for="type: AA">type: AA</label><br /></div>
</div>
<div class="row">
<div class="col-sm-12">
<input onchange="myFunction()" class="checkboxtest" type="checkbox" name='PA'" id="type: PA" /> <label for="type: PA">type: PA</label><br /></div>
</div>
<div class="row">
<div class="col-sm-12">
<input onchange="myFunction()" class="checkboxtest" type="checkbox" name='IS'" id="type: IS" /> <label for="type: IS">type: IS</label><br /></div>
</div>
<div class="row">
<div class="col-sm-12">
<input onchange="myFunction()" class="checkboxtest" type="checkbox" name='RS'" id="type: RS" /> <label for="type: RS">type: RS</label><br /></div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="1" class="Combinaison">
nothing</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="2" class="Combinaison">
AA</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="3" class="Combinaison">
PA</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="4" class="Combinaison">
IS</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="5" class="Combinaison">
RS</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="6" class="Combinaison">
AA+PA</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="7" class="Combinaison">
AA+IS</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="8" class="Combinaison">
AA+RS</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="9" class="Combinaison">
PA+IS</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="10" class="Combinaison">
PA+RS</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="11" class="Combinaison">
IS+RS</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="12" class="Combinaison">
AA+PA+IS</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="13" class="Combinaison">
AA+PA+RS</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="14" class="Combinaison">
PA+IS+RS</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="15" class="Combinaison">
AA+IS+RS</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="16" class="Combinaison">
AA+PA+IS+RS</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var MyCheckBoxSelected = [];
var combinaisonResult = document.getElementsByClassName("Combinaison");
for (var j = 0, max2 = combinaisonResult.length; j < max2; j++){
	combinaisonResult[j].textContent = combinaisonResult[j].textContent.replace(/(\r\n|\n|\r)/gm, "");
	combinaisonResult[j].style.display = "none";
}

function myFunction() {
var x = document.querySelectorAll(".checkboxtest");


for (var j = 0, max2 = combinaisonResult.length; j < max2; j++){
	combinaisonResult[j].style.display = "none";
	}


var MyCheckBoxSelected = [];
for (var i = 0, max = x.length; i < max; i++){
	if (x[i].checked === true){
		MyCheckBoxSelected.push(x[i].name);
	}	
	}
	
			//0 Coche cochée
			//==============
			if	(MyCheckBoxSelected.length == 0){
			combinaisonResult[0].style.display = "block";
			}
	
			for(var i = 0, max = MyCheckBoxSelected.length; i < max; i++){
			for (var j = 0, max2 = combinaisonResult.length; j < max2; j++){
			combinaisonResult[j].style.display = "none";			
			
			//1 Coche cochée
			//==============
			
			if(MyCheckBoxSelected.length === 1 && MyCheckBoxSelected[i] == combinaisonResult[j].textContent){
				combinaisonResult[j].style.display = "block";
			}
			
			//2 Coches cochées
			//================					
			
			 if (MyCheckBoxSelected.length === 2 &&
				 combinaisonResult[j].textContent.indexOf(MyCheckBoxSelected[0]) !== -1 &&
				 combinaisonResult[j].textContent.indexOf(MyCheckBoxSelected[1]) !== -1 &&
				 (combinaisonResult[j].textContent.match(/[+]/g) || []).length == 1 ){
				 combinaisonResult[j].style.display = "block";
				 }
				 
			//3 Coches cochées
			//================
			if	(MyCheckBoxSelected.length === 3 &&
				combinaisonResult[j].textContent.indexOf(MyCheckBoxSelected[0]) !== -1 &&
				combinaisonResult[j].textContent.indexOf(MyCheckBoxSelected[1]) !== -1 &&
				combinaisonResult[j].textContent.indexOf(MyCheckBoxSelected[2]) !== -1 &&
				(combinaisonResult[j].textContent.match(/[+]/g) || []).length == 2 ){
				combinaisonResult[j].style.display = "block";
				}
			//4 Coches cochées
			//================
			
			if	(MyCheckBoxSelected.length === 4 &&
				(combinaisonResult[j].textContent.match(/[+]/g) || []).length == 3 ){
				combinaisonResult[j].style.display = "block";
				}
			 }
			 }
			 }
			 


	
</script>
 
</body>

LCaba

21 novembre 2017 à 17:21:21

T'es un grand malade :waw: :waw: :waw:

En 40 lignes d'HTML et en 28 lignes de JS : https://jsfiddle.net/mhgmbc9m/

EDIT: version commentée : https://jsfiddle.net/mhgmbc9m/2/

Tu pourras constaté que j'ai pris soin de ne pas toucher l'intérieur des bloc que j'affiche ou que je masque

-
Edité par LCaba 21 novembre 2017 à 17:26:14

Cabinet vétérinaire à Angers

tino242424

22 novembre 2017 à 16:25:24

Merci beaucoup pour ton code et les commentaires, j'ai découvert pleins de choses :-)

En fait le code HTML il est généré par un programme c'est pour ça qu'il y a des trucs bizzards et qu'il est long

Le problème avec ton code, c'est qu'il concataine les combinaisons avec span.classList.add('not-first');

Et comme j'avais dit, je ne pourrais pas le faire car chaque combinaison sera unique avec son image dont je ne connetrai pas à l'avance le nom et un tableau.

En tout cas je constate qu'il y a un bon potentiel d'amélioration sur mon script.

Merci encore :-)

LCaba

23 novembre 2017 à 10:26:59

Ok j'avais mal compris, je pensais que c'était l'intérieur de la div qui était généré automatiquement, mais pas la combinaison.

Dans ce cas, je te conseille plutôt de charger le contenu de la div en ajax, ça évite de devoir gérer les combinaison à la fois côté serveur et côté js, et ça allège la présentation de ton code. On commence par le HTML :

<form method="post" >
      <input type="checkbox" name="AA" >
      <input type="checkbox" name="PA" >
      <input type="checkbox" name="IS" >
      <input type="checkbox" name="RS" >
    </form>
<div id="combinaison"></div>

Le fait de mettre dans un form va simplifier la construction de notre requête grace à l'objet FormData. Je vais utiliser des fonctions flechées et l'API fetch. Je te laisse regarder dans la doc du MDN pour comprendre :

const form = document.querySelector('form'); // ce serait d-utiliser un identifiant pour le form
const div = document.querySelector('#combinaison'); // la div qui va recevoir les données

function update(e) {
  div.textContent = 'Chargement...';
  // on envoie une requete post au serveur
  // ici, pour le serveur, c est exactement
  // comme si on lui soumettait le formulaire
  // en mode HTML
  fetch('generator.php', {
    method = 'post',
    body: new FormData(form)
  }).then(response => { // appelée une fois la requete reçue
    // ici, on a besoin du texte brut :
    reponse.text().then(html => { // appelée une fois la rpéonse traitée
      div.innerHTML = html; // on rempli notre div avec les données.
    });
  });
}

// tu appelles update() au chargement puis à chaque 'change'

generator.php est une page qui génère le contenu en fonction de la combinaison reçue (par exemple, si "AA" est coché, $_POST['AA'] vaut "on" et si "AA" est décoché, $_POST['AA'] n'est pas défini. Coté php, j'aurais tendance à faire ceci pour rendre le code plus lisible :

$combinaison = 
    (isset($_POST['AA']) ? 'AA' : '--')
  . (isset($_POST['AA']) ? 'PA' : '--')
  . (isset($_POST['AA']) ? 'IS' : '--')
  . (isset($_POST['AA']) ? 'RS' : '--');

switch($combinaison) {
  case '--------':
    // truc à faire
    break;
  case '------RS': 
    // truc à faire
    break;
  case '----IS--': 
    // truc à faire
    break;
  case '----ISRS':
    // truc à faire
    break;
  case '--PA----': 
    // truc à faire
    break;
  case '--PA--RS': 
    // truc à faire
    break;
  //etc...
}

-
Edité par LCaba 23 novembre 2017 à 10:28:38

Cabinet vétérinaire à Angers