Discussion :

[boogiball]

Bonjour à tous et à toutes,

J'ai un léger souci avec mon JavaScript...

Je souhaiterais automatiser mon slideToggle au chargement de la page !
Quand je clique sur une checkbox, un contenu apparait. Pour l'instant aucun problème mais si je charge ma page et que une checkbox est déjà check (via ma BD), j'aimerais que ça s'affiche tous seul.

Quelqu'un a une idée ?


Voici le code qui me permet d'afficher lorsque je check :

Code :

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

1
2
3
4
5
6
$('.subsublist').hide();
$('.clearfix').change(function() {
      var Cb=$(this).children('.checkbox').eq(0);
      var jObj = $( this ).next( '.subsublist' ).eq(0);
      jObj.slideToggle( Cb.checked );
});

Voici le code qui fonctionne pas :

Code :

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

1
2
3
4
5
6
7
8
9
var ischecked=$('.checkbox').is(':checked'); 
if(ischecked)
{
       $('.checkbox').next('.subsublist').eq(0).slideToggle(200);
}
else
{
       $('.checkbox').next('.subsublist').slideUp(200);   
}

Voici une partie de mon html :

Code html :

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

1
2
3
4
5
6
7
8
   <div class="clearfix"><div class="checkbox">
         <label>
         <input type="checkbox" id="inputmetiers[Banque]" name="metiers[Banque]" value="Banque">
         Banque</label>
   </div>
</div>
<div class="subsublist" style="margin-left: 20px; margin-bottom: 20px; display: none;"><div class="row"><div class="col-md-4" style="margin-top:20px;">
...

Merci.

[danielhagnoul]

Exemple :

Code CSS :

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

.row { display: none; }

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
<label>
    <input type="checkbox" name="metiers[]" value="0">
    Banque 1
</label>
<label>
    <input type="checkbox" name="metiers[]" value="1">
    Banque 2
</label>
<label>
    <input checked type="checkbox" name="metiers[]" value="2">
    Banque 3
</label>
 
<div class="row">
    <p>Row Banque 1</p>
</div>
<div class="row">
    <p>Row Banque 2</p>
</div>
<div class="row">
    <p>Row Banque 3</p>
</div>

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
$( function(){ // forme abrégée de $(document).ready(function(){
 
    var jObjCheckbox = $( "input[type='checkbox'][name='metiers[]']" ),
        jObjRows = $( "div.row" );
 
    jObjCheckbox.on( "change", function( ){
        if ( $( this ).is( ":checked") ){
            jObjRows
                .eq( $( this ).val() )
                .show();
        } else {
            jObjRows
                .eq( $( this ).val() )
                .hide();
        }
    });
 
    jObjCheckbox.trigger( "change" );
 
});

[boogiball]

Bonjour,

Merci d'avoir répondu !

J'ai essayer le code et il ne fonctionne pas :/

http://jsfiddle.net/

[NoSmoking]

Bonjour,

J'ai essayer le code et il ne fonctionne pas :/

il est vrai que cela nous aide énormément pour cerner le soucis

[boogiball]

En même temps, on me propose une solution , je la teste et elle ne marche pas ...
Je prefère prévenir après si vous voulez des informations vous avez juste a demander .

Le problème est expliqué juste au dessus

Lorsqu'une checkbox est pré-cocher la div next() doit être affiché ( pour résumé )

[NoSmoking]

En même temps, on me propose une solution , je la teste et elle ne marche pas ...

non tu as testé une solution approchante mais pas celle de danielhagnoul.

Ton exemple en lien fonctionne très bien.
Tu utilises une id comme sélecteur, donc cela ne s'applique qu'à l'élément ayant cette id mais pas à d'autres si tu en rajoutes.

[boogiball]

Tu utilises une id comme sélecteur, donc cela ne s'applique qu'à l'élément ayant cette id mais pas à d'autres si tu en rajoutes.

Je sais l'exemple à été pris sur le net mais enfaite le principale problème est que je ne peux pas sélectionner la checkbox pré-cocher avec mon code Jquery :/

Je peux le sélectionner seulement avec un change() et $this alors que la étant donné que je clique pas je ne sais pas comment sélectionner cette checkbox

Code :

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

1
2
3
4
5
6
7
8
9
var ischecked=$('.checkbox').is(':checked'); 
if(ischecked)
{
       $('.checkbox').next('.subsublist').eq(0).slideToggle(200);
}
else
{
       $('.checkbox').next('.subsublist').slideUp(200);   
}

Dans ce code je sélectionne toute les checkbox et de je test si elle sont checked.

Il est possible de les stockers dans un tableau pour ensuite les tester une par une ?

[Bovino]

Il est possible de les stockers dans un tableau

Ben oui, c'est le principe du sélecteur $('.checkbox')...

ensuite les tester une par une

Oui, mais pas avec .is(), c'est .each() qu'il faut utiliser.

[boogiball]

Merci pour cette réponse , je vais tester

[boogiball]

Hello désolé pour cette réponse tardive ...

J'ai remplacé la fonction is() par each() mais mon debug me dis qu'il ne connait pas cette fonction :/

Je ne sais pas du tout comment l'utiliser dans la doc ils explique seulement l'utiliser avec une fonction ... or moi je veux l'utiliser à l'instantiation du document. Quelqu'un a une idée ?

Merci

EDIT: J'ai retester la fonction de danielhagnoul et elle est parfaite seul soucis c'est que les checkbox sont dans la div="subsublist" du coup il faut que je slidedown() le parent et le non le children ...

Je ne sais pas comment le sélectionner :/ ( je suis vraiment mauvais en jquery dsl )

J'ai trouver mon problème le système marche parfaitement le soucis c'est que j'ai plusieurs checkbox dans mon subsublist du coup quand je rencontre une checkbox checked il n'y a pas de problème mais quand je prend la suivant non checked .. ça hide tout du coup ça annule ...

Quelqu'un a une idée pour contourné ça :/