Checkbox et Slidetoggle

Version imprimable

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:

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:

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:

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. :)

:calim2:

Exemple :

Code:

.row { display: none; }

Code:

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:

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" );
 
});

13/02/2015, 17h08
boogiball

Bonjour,

Merci d'avoir répondu !

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

http://jsfiddle.net/
15/02/2015, 14h26
NoSmoking

Bonjour,

Citation:

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

il est vrai que cela nous aide énormément pour cerner le soucis :calim2:
16/02/2015, 09h41
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é )
16/02/2015, 11h25
NoSmoking

Citation:

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.

Citation:

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:

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 ?

18/02/2015, 10h48
Bovino

Citation:

Il est possible de les stockers dans un tableau

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

Citation:

ensuite les tester une par une

Oui, mais pas avec .is(), c'est .each() qu'il faut utiliser.
27/02/2015, 13h31
boogiball

Merci pour cette réponse , je vais tester :)
23/03/2015, 11h43
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 :/