Discussion :

[fleedalfire]

Bonjour.
Je cherche à faire que si on clique sur la case à cocher et bien ça affiche l'input qui permet de choisir le nombre de personne.
Je suis pas du tout doué en javascript alors j'ai essayé de faire un truc, mais je suis perdu. Est-ce que vous pourriez me donner des pistes.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
/*faire apparaître le nombre de personne pour le menu donné*/
    if(true){
        $('#mb1').click(function(){
            $('input #nombre').show(1000);
        }); 
    }
    else{
        $('#mb1').click(function(){
            $('input #nombre').hide(1000);
        });
    }
    });

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
 
<p>
                        <input id="nombre" name="nb_personne" type="number" min="2" max="20" value="2"/>
                        <input name="menubanquet[]" value="menu1" type="checkbox" id="mb1"/>
                        <label for="mb1">
                            <div class="row menumb">
                                <div class="col s12 m12 l12">
                                    <div class="card boxPlat">
                                        <div class="card-image">
                                            <img class="responsive-img" src="images/menu_banquet/asparagus-2258018_1920.jpg">
                                        </div>
                                        <div class="card-content">
                                            <div class="row">
                                                <div class="col s12 m12 l12">
                                                    <!--J'affiche et concatène prix1-->
                                                    <?php //echo "<p>".$prix1["prix_menu"]." CHF</p>"; ?>
                                                    <h3 class="titremb">Menu <span class="dumb">à</span> 40 <span class="chfmb">CHF</span></h3>
                                                </div>
                                            </div>
                                            <!-- Je fais une boucle sur $resultat1 pour afficher tant qu'il y a quelque chose dedans -->
                                            <?php //while ($menubanquet1 = mysqli_fetch_assoc($resultat1)){ ?>
 
                                                <?php//echo $menubanquet1["descriptif"].'<br/>';?>
                                                <p class="centrermenubanquet">Carpaccio de melon et jambon cru</p>
                                                <p class="centrermenubanquet">Suprême de volaille fermier à la moutarde ancienne <br/>Riz aux petits légumes</p>
                                                <p class="center-align">Tiramisu</p>
 
                                            <?php //} ?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </label>
                    </p>

[mathieu]

la case à cocher a une propriété "checked" en jQuery qui peut être testée comme cela :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
    $('#mb1').click(function () {
 
        if ($(this).prop("checked")) {
            $('input #nombre').show(1000);
        } else {
            $('input #nombre').hide(1000);
        }
 
    });

[SpaceFrog]

Par sécurité je serai passé par le onchange

Code :

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

1
2
3
4
<input type="checkbox" id="foo" />
<div id="bar">
contenu du div
</div>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
$( function(){
$('#foo').on('change', function(){
 if( $(this).is(':checked')){
 $("#bar").slideDown();
 }
 else{
 $("#bar").slideUp();
 }
})
});

[fleedalfire]

Super ton idée SpaceFrog, mais au départ du chargement de la page il est afficher alors que j'aimerai qu'il ne soit pas afficher,
comment dois-je faire.

J'ai trouver une idée, mais elle ne fonctionne pas correctement.

J'ai mis au début du code jquery.

Code :

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

1
2
 
$('#nbrpersonne1').hide();

puis la suite est

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
$( function(){
        $('#nbrpersonne1').hide();
        $('#mb1').on('change', function(){
            if( $(this).is(':checked')){
                $("#nbrpersonne1").slideDown();
            }
             else{
                 $("#nbrpersonne1").slideUp();
            }
        });
    });

Le problème que j'ai c'est qu'il s'affiche une seconde puis disparaît, alors que j'aimerai qu'il ne s'affiche pas du tout tant que l'on a pas cliquer sur le case à coché.

[SpaceFrog]

dans ton css

Code :

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

#nbrpersonne1 { display:none; }

[fleedalfire]

Merci beaucoup pour ton aide.
ça marche parfaitement.