Afficher une div

Version imprimable

26/08/2020, 21h52
sylvain257

Afficher une div

Hello,

Voila ce que je veux faire : J'ai des checkbox, je veux afficher des images. Chaque checkbox fait référence à un fichier particulier. Par conséquent, je suis parti sur le principe que l'image avait le même nom que la valeur de la checkbox. Jusque là pas de pbs. Seulement je voudrais boucler ce script (avec forEach) afin de ne pas à avoir de créer une nouvelle div pour une nouvelle image. En gros je veux que le HTML soit généré via un script JS.

C'est exactement ce code : https://www.tutorialrepublic.com/cod...ing-checkboxes à ceci près qu'il y a 3 DIV pour 3 checkboxes.

Comment faire ?

Merci pour votre aide :-)

Sylvain

Salut,

Principe: http://javatwist.imingo.net/checkimages.htm

- un nombre de checkboxes égal au nombre d'images;
- des images invisibles a priori;
- un click sur une checkbox change la visibilité de l'image correspondante;

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title></title>
 
<style>
.hide {display:none;text-align:center;}
#check, #pitch {margin:50px;text-align:center;}
</style>
 
</head>
<body>
 
<div id="check">
	<label><input type="checkbox">image 1</label>
	<label><input type="checkbox">image 2</label>
	<label><input type="checkbox">image 3</label>
	<label><input type="checkbox">image 4</label>
	<label><input type="checkbox">image 5</label>
	<label><input type="checkbox">image 6</label>
</div> 
 
<div id="pitch">
	<img class="hide" src="sm01.gif" alt="un" />
	<img class="hide" src="sm02.gif" alt="deux" />
	<img class="hide" src="sm03.gif" alt="trois" />
	<img class="hide" src="sm04.gif" alt="quatre" />
	<img class="hide" src="sm05.gif" alt="cinq" />
	<img class="hide" src="sm06.gif" alt="six" />
</div> 
 
 
<script>
const ch=document.querySelectorAll("#check input");
ch.forEach((v,i)=>{
        v.addEventListener("click",()=>{
                document.querySelectorAll("#pitch img")[i].classList.toggle("hide");
        })
})
</script>
 
</body>
</html>

Bonjour,

Merci pour ton retour mais c'est précisément ce que je ne veux pas. Je veux pouvoir générer de l'HTML avec un script JS.

Pour faire la traduction française de mon script, je veux que celui ci fasse : "Pour chaque checkbox, tu récupères leurs valeurs ; quand elle est checkée tu affiches l'image dt le nom correspond à sa valeur et tu l'affiches dans la div2 ; quand elle est désélectionnée tu l'enlèves.".

C'est un script typique pour utiliser les boucles, ici ForEach, et utiliser la méthode .push().

Je sais que je suis pas loin, mais je bloque.
Code:

1 2 3 4 5 6 7 8 var legend = []; $('input[type="checkbox"]').click(function(){ var val = $(this).attr("value"); legend.forEach(function(element){ document.getElementById("legende").innerHTML += '<div class="' + element.get("val") + '"><table><tr><td><img src="' + element.get("val") +'.png"></td></tr></table></div>' }) });
Mais ça marche pas....

Merci pour votre aide

Sylvain

est-ce que ceci fait l'affaire?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="">
</head>
 
<body>
    <div id="check">
        <label><input type="radio" name="radio">image 1</label>
        <label><input type="radio" name="radio">image 2</label>
        <label><input type="radio" name="radio">image 3</label>
        <label><input type="radio" name="radio">image 4</label>
        <label><input type="radio" name="radio">image 5</label>
        <label><input type="radio" name="radio">image 6</label>
        <div class="container-image"></div>
    </div>
    <script>
        const inputs = document.querySelectorAll("#check input");
        const container = document.querySelector('.container-image');
        inputs.forEach((input,i) => {
            let img = '<img src="https://placehold.it/'+150/(1+i)*4+'">'
            input.addEventListener('click',()=>{
                if(input.checked){
                    container.innerHTML='';
                    container.insertAdjacentHTML('afterbegin',img)
                }
            })
        })
    
    </script>
</body>
</html>

27/08/2020, 20h50
javatwister

De fait, je pense que tu souhaites des boutons radio... te permettant de n'afficher qu'une image à chaque fois...;
Bref, clarifie déjà ce que tu veux en terme d'interface, avant de penser à la technique pour y arriver.
27/08/2020, 22h16
javatwister

Tente ce 2e lien: http://javatwist.imingo.net/checkimages2.htm

(et si on se plante, que veux-tu de plus précis?)
31/08/2020, 01h54
sylvain257

Citation:

Envoyé par javatwister

Tente ce 2e lien: http://javatwist.imingo.net/checkimages2.htm

(et si on se plante, que veux-tu de plus précis?)

C'est exactement ça que je veux même si je pense qu'il me faut un script en PHP avec une requête AJAX, afin de pouvoir de l'éditer avec un formulaire dont les données seraient stockées dans un fichier XML.
Mais merci pour vos retours :-)