IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Afficher un div selon la valeur d'une checkbox


Sujet :

jQuery

  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    11
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2008
    Messages : 11
    Points : 10
    Points
    10
    Par défaut Afficher un div selon la valeur d'une checkbox
    Bonjour à tous,

    Je débute en JQuery et je suis confrontée à un problème qui me dépasse...

    Dans un formulaire, j'ai plusieurs listes de checkboxs dont les valeurs proviennent d'une base de données et sont affichées via un script PHP. Chaque liste comprend la valeur "Autre" (inscrite dans la base de données avec l'id 150) qui permet d'afficher un div avec un input text pour préciser sa réponse.
    A cette liste je rajoute également une checkbox nommée différemment, ayant la valeur "Aucune", qui me permet de désactiver en Jquery les checkbox précédentes.

    Mon script de désactivation marche très bien mais pour ce qui est d'afficher mes divs, cela est très aléatoire. Il faut cliquez sur la checkbox "Aucune" pour qu'il fonctionne correctement.

    J'ai également essayé l'exemple donné dans la FAQ JQuery mais je n'arrive pas vraiment à l'adapter et à détecter si ma valeur "150" figure dans la liste...


    Voici ce que j'ai fait :

    Code HTML
    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
     
    <form class="form" action="" method="post" name="step3">
    <label>Quel(s) type(s) de vacances privilégiez-vous ?<br>
    <i>(4 choix possibles)</i></label>
    <?
    //Interrogation de la BDD
    $table = "type_vacances";
    $item = liste($table,"id_type_vacances","id_type_vacances","");
    if ($item != 0){
    	foreach ($item as $item){
    		$name = recup_intit ($item,$table,"id_type_vacances","intitule");
    		echo "<input type='checkbox' name='type_vacances[]' id='type_vacances' onclick=\"mafonction(this.value);\" class='autre_cont_tp' value=".$item.">".$item.$name."<br>";
    	}
    		echo "<input type='checkbox' name='".$table."_supp_no' id='".$table."_supp_no' onclick=\"checkSelected('".$table."_supp_no')\" value='0'>Aucun<br>";
    }
    ?>
     
     
     
    <div id="autre_type_vac" style="display:none;">
    <table width="80%" border="1">
    	<tr>
    		<td width="40%" class="cellule_t_right"><label>Précisez</label></td>
    		<td class="cellule_t_left"><input type="text" name="autre_vacances" size="60"></td>
    	</tr>
    </table>
    </div>
    </form>

    Le JS

    La fonction checkSelected(htmlElement) est une fonction js qui me permet de gérer mes affichages conditionnels selon l'endroit du formulaire ou je me trouve (il est assez long et comporte pas mal de div).

    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
     
    function checkSelected(htmlElement)	{
    var pro = document.getElementById(htmlElement).value;
     
    //type de vacances (autre checkbox)
    $(":checkbox[name='type_vacances[]']").click(function(){
    	var objChecked = $("input[name='type_vacances[]']:checked"),
    		n = objChecked.length,
    		tab = [];
    	for(var i = 0; i <= n; i++){
    		if($(objChecked[i]).val() == "150"){
    			$("#autre_type_vac").show("fast");
    		}
    		else{
    			$("#autre_type_vac").hide();
    		}
    	}
    });
     
    //Aucun
    var aucune_tp = $("input:checked[name='type_vacances_supp_no']").val();
    if(aucune_tp == "0"){ $('.autre_cont_tp').attr('disabled', '');}else{ $('.autre_cont_tp').removeAttr('disabled');}
     
    }

    Si quelqu'un a une piste ou un lien pour me guider, je suis preneuse.

    Un grand merci par avance.

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 665
    Points
    66 665
    Billets dans le blog
    1
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    foreach ($item as $item){
    là y'a un souci ...

  3. #3
    Membre à l'essai
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    11
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2008
    Messages : 11
    Points : 10
    Points
    10
    Par défaut
    Bonjour et merci de ton aide.

    J'ai modifié le code, c'est vrai que ce sera moins sujet à confusion.

  4. #4
    Membre à l'essai
    Profil pro
    Inscrit en
    Juin 2008
    Messages
    11
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2008
    Messages : 11
    Points : 10
    Points
    10
    Par défaut
    Bonjour,
    Enfin, j'ai pris le temps de replonger dans mon code...
    Et l'erreur était toute bête... autant que j'ai presque honte de l'avouer...

    En fait, ma fonction n'était pas dans le
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $(document).ready(function(){
    mais dans à l’intérieur d'une autre fonction javascript.... d'où le comportement capricieux de mon action !
    Ça m'apprendra à mieux ranger mes affaires !!

    Maintenant j'ai fait 2 fichiers deux scripts : 1 JS et 1 JQuery.

    Merci

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 13
    Dernier message: 28/11/2015, 13h39
  2. [XL-2010] Afficher une image selon la valeur d'une cellule
    Par rob1son76 dans le forum Conception
    Réponses: 0
    Dernier message: 24/04/2015, 13h57
  3. Afficher Une Liste Selon La Valeur D'une Cellule
    Par Kevin_18 dans le forum Excel
    Réponses: 10
    Dernier message: 02/07/2007, 19h22
  4. Réponses: 4
    Dernier message: 23/04/2007, 14h01
  5. Réponses: 5
    Dernier message: 28/08/2006, 18h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo