Un checkbox dans une autre checkbox, est-ce que ça marche ?

**d3LTa7** · 02/08/2018, 18h47

Salut !! =)

J'ai un petit souci sur un code, je trouve bizarre que mon système de checkbox marche d'un coté (version assez simple) et de l'autre pas du tout (un peu plus complexe avec un checkbox dans une autre) et le tout avec 3 fonctions totalement identique sauf au niveau des id bien évidement

Bon le mieux c'est en montrant le code je pense :

coté html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<div id="connect">    
                    <p>
                        <label for="connection">Connection</label>
                        <input type="checkbox" id="connection" name="connection">
                    </p>     
                    <div id="log">
                        <p>
                            <label for="pseudolog">Pseudo :</label>
                            <input type="text" name="pseudolog" id="pseudolog">
                        </p>
                        <p>
                            <label for="pass">Mot de passe :</label>
                            <input type="text" name="pass" id="pass">
                        </p>
                    </div>
                </div>
                <div id="regist">
                    <p>
                        <label for="new">Inscription</label>
                        <input type="checkbox" id="new" name="new">
                    </p>
                    <div id="newlog">
                        <form id="inscription" class="inscription" name="inscription" method="post">
                            <div id="inser">
                                <p>
                                    <label for="pseudo">Pseudo :</label>
                                    <input type="text" id="pseudo" name="pseudo">
                                </p>
                                <p>
                                    <label for="mail">E-mail :</label>
                                    <input type="email" id="email" name="email">
                                </p>
                                <p>
                                    <label for="password">Mot de passe :</label>
                                    <input type="password" id="password" name="password">
                                </p>
                                <p>
                                    <label for="password">Confirmer mot de passe :</label>
                                    <input type="password" id="password" name="password">
                                </p>
                            </div>
                            <div id="check">
                                <p>
                                    <label for="join">Rejoindre la guilde Rage Fist</label>
                                    <input type="checkbox" id="join" name="join">
                                </p>
                                    <div id="postule">
                                        <p>
                                            <label for="pseudoIG">Pseudo In Game :</label>
                                            <input type="text" name="pseudoIG" id="pseudoIG">
                                        </p>
                                        <p>
                                            <label for="motiv">Dites nous en un peu plus sur vous !</label>
                                            <textarea id="motiv" name="motiv"></textarea>
                                        </p>
                                    </div>
                            </div>
                        </form>
                    </div>
            </div>

et le JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
45
46
47
 
function rejoindre() {
  document.getElementById('join').onclick = function(){ 
      if (document.getElementById('join').checked){ 
          document.getElementById('postule').style.display = "block";
      }else{
          document.getElementById('postule').style.display = "none";
}
};
  document.getElementById('postule').style.display = "none";
};
 
window.onload = function(){
    rejoindre()
}
 
function inscri() {
  document.getElementById('new').onclick = function(){ 
      if (document.getElementById('new').checked){ 
          document.getElementById('newlog').style.display = "block";
      }else{
          document.getElementById('newlog').style.display = "none";
}
};
  document.getElementById('newlog').style.display = "none";
};
 
 
window.onload = function(){
    inscri()
}
 
function co() {
  document.getElementById('connection').onclick = function(){ 
      if (document.getElementById('connection').checked){ 
          document.getElementById('log').style.display = "block";
      }else{
          document.getElementById('log').style.display = "none";
}
};
  document.getElementById('log').style.display = "none";
};
 
 
window.onload = function(){
    co()
}

Bon je sais d'avance qu'il y a des moyens plus simple de faire de genre de chose j'en suis persuader mais à mon niveau j'y vois un peu plus clair comme ça... J'aimerais surtout savoir pourquoi que ma methode ne marche pas et pourquoi pas connaitre la version simplifié =)

Merci

Invité · 02/08/2018, 20h05

Bonjour,

1- Déjà, "Un checkbox dans une autre checkbox" : je ne sais même pas comment on peut faire !

2- Dans ton code HTML, la balise <form> n'englobe pas tous les <input>... Y'a comme un défaut...

3- (après un coup d'oeil au code JavaScript) il faut regrouper les instructions dans UN SEUL window.onload :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
window.onload = function() {
  co();
  inscri();
  rejoindre();
};

Là, ça va tout de suite mieux.

4- On peut aussi simplifier chacune des fonctions :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
function rejoindre() {
  var btn = document.getElementById("join");
  var div = document.getElementById("postule");
  btn.onclick = function() {
    div.style.display = (btn.checked)? "block" : "none";
  };
  div.style.display = "none";
}
 
function inscri() {
  var btn = document.getElementById("new");
  var div = document.getElementById("newlog");
  btn.onclick = function() {
    div.style.display = (btn.checked)? "block" : "none";
  };
  div.style.display = "none";
}
 
function co() {
  var btn = document.getElementById("connection");
  var div = document.getElementById("log");
  btn.onclick = function() {
    div.style.display = (btn.checked)? "block" : "none";
  };
  div.style.display = "none";
}
 
window.onload = function() {
  co();
  inscri();
  rejoindre();
};

5- On peut encore simplifier, avec UNE SEULE fonction (et 3 paramètres) :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
function checkbox_action( action ) 
{
  switch( action )
  {
    case 'connection':
      var btn = document.getElementById("connection");
      var div = document.getElementById("log");
      break;
    case 'inscription':
      var btn = document.getElementById("new");
      var div = document.getElementById("newlog");
      break;
    case 'rejoindre':
      var btn = document.getElementById("join");
      var div = document.getElementById("postule");
      break;
  }
  btn.onclick = function() {
    div.style.display = (btn.checked)? "block" : "none";
  };
  div.style.display = "none";
}
 
window.onload = function() {
  checkbox_action('connection');
  checkbox_action('inscription');
  checkbox_action('rejoindre');
};

6- Une autre variante, encore plus compacte :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function checkbox_action( ) 
{
  var actions = ['connection','inscription','rejoindre'];
  var btns = ['connection','new','join']; // id des checkbox
  var divs = ['log','newlog','postule']; // id des div
  actions.forEach( function( action, index ) 
  {
    var btn = document.getElementById(btns[index]);
    var div = document.getElementById(divs[index]);
    btn.onclick = function() {
      div.style.display = (btn.checked)? "block" : "none";
    };
    div.style.display = "none";
  });
}
 
window.onload = function() {
  checkbox_action();
};

**d3LTa7** · 02/08/2018, 20h58

1. En faite le principe que la première checkbox dévoile la possibilité d'ouvrir la deuxième tout simplement =)

2.Bien vu !! c'est juste que j'ai rajouté que après la partie sans !!

3.Ha ba comme quoi j'en apprends tout les jours =)

4.Je comprends pas trop la ligne 5 :/ (et donc la 14 et la 23)

5.Faut vraiment que je revois le switch et les cases !!!

6.Avec des arrays donc... La ca commence à etre un peu piquant pour moi mdrrr... Mais c'est marrant j'aurais jamais pensé à utiliser cela...

7. Merci pour ta réponse ^^