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.