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

JavaScript Discussion :

Liste déroulante de cases à cocher


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    201
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 201
    Points : 26
    Points
    26
    Par défaut Liste déroulante de cases à cocher
    bonjour


    j'ai actuellement une liste de selection comme ceci
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <label for="type"><?=$this->lang->line('type');?></label>
    <?php $options = array(
        'choix1'  => $this->lang->line('choix1'),
        'choix2'  => $this->lang->line('choix2'),
    );
            
    $construction_type = FALSE;
    if(isset($project)){ $type = $project->type;} 
    echo form_dropdown('type', $options, $type, 'style="width:100%"'); ?>
    je souhaiterais pouvoir remplacer les "choix" par des case a cocher
    et recuperer les valeur



    exemple , dans ma liste , j'ai 3 cases a cocher (choix1,choix2,choix3)
    si je selectionne choix1 , et choix 2
    je souhaiterais récuperer en valeur "choix1,choix2" (les valeurs séparées par une virgule)


    merci

  2. #2
    Membre expérimenté
    Homme Profil pro
    Inscrit en
    Septembre 2009
    Messages
    875
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Septembre 2009
    Messages : 875
    Points : 1 313
    Points
    1 313
    Par défaut
    et bien fait des input checkbox. Google t'aidera a apprendre la base des formulaires html

    Pour info, on ne récupère pas les valeurs séparés par des points virgules car c'est super crade.

  3. #3
    Membre habitué
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    329
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 329
    Points : 151
    Points
    151
    Par défaut
    Bonjour,

    J'ai déja utilisé ce code pour des boutons radios :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    <?php 
     
    $selec1 = ( $radio1 == '0' ) ? 'checked ' : ''; 
    $selec2 = ( $radio2 == '1' ) ? 'checked ' : '';
     
    echo 'blablabla<input type="radio" name="radio1" value="0" '.$selec1.'/>'; 
    echo 'blablabla<input type="radio" name="radio2" value="1" '.$selec2.'/>'; 
     
    ?>
    Si ça peut t'aider.

    Cordialement.

  4. #4
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    201
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 201
    Points : 26
    Points
    26
    Par défaut
    Citation Envoyé par gototog Voir le message
    et bien fait des input checkbox. Google t'aidera a apprendre la base des formulaires html
    c'est pour cela que je tombe sur ce forum


    Citation Envoyé par gototog Voir le message
    Pour info, on ne récupère pas les valeurs séparés par des points virgules car c'est super crade.
    ba moi si , je veux faire ça pour concatener les diffrentes solutions

    merci azorol ...

  5. #5
    Membre expérimenté
    Homme Profil pro
    Inscrit en
    Septembre 2009
    Messages
    875
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Septembre 2009
    Messages : 875
    Points : 1 313
    Points
    1 313
    Par défaut
    voici le code html des checkboxes
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <form action="url_de_ton_traitement_du_formulaire.php">
      <input type="checkbox" name="couleur" value="red">it's red<br/>
      <input type="checkbox" name="couleur" value="blue">it's blue<br/>
      <input type="checkbox" name="couleur" value="green">it's green<br/>
      <input type="checkbox" name="couleur" value="pink">it's pink<br/>
    </form>

    il est important de comprendre que le name doit etre le meme pour tous les checkboxes d'un groupe.

    une fois le formulaire soumis, regarde comment est récupéré l'ensemble des cases cochées en effectuant un var_dump($_POST['couleur']) après tu pourras les concaténer dans une variable séparés par des points virgule si t'y tiens vraiment

  6. #6
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    201
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 201
    Points : 26
    Points
    26
    Par défaut
    ce que je voulais faire c'est de faire des checkbox dans une liste deroulante
    c'est possible?

  7. #7
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Points : 15 059
    Points
    15 059
    Par défaut
    Bonjour,

    @gototog,
    Il faut que l'attribut soit de type tableau
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <form action="url_de_ton_traitement_du_formulaire.php">
      <input type="checkbox" name="couleur[]" value="red" />it's red<br/>
      <input type="checkbox" name="couleur[]" value="blue" />it's blue<br/>
      <input type="checkbox" name="couleur[]" value="green" />it's green<br/>
      <input type="checkbox" name="couleur[]" value="pink" />it's pink<br/>
    </form>

    Ainsi $_GET["couleur"] ou $_POST["couleur"] selon la méthode du formulaire sera un tableau.

    A+.

  8. #8
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Andry, dans le cas des checkbox, seule la valeur sélectionnée sera transmise, il n'y a donc pas vraiment d'utilité de passer par un name de type tableau...

  9. #9
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Points : 15 059
    Points
    15 059
    Par défaut
    Bovino, on parle de checkbox là mais pas de radio bouton, il peut sélectionner plusieurs cases.

  10. #10
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut


    Ah oui tiens...

    Au temps pour moi !

  11. #11
    Modératrice
    Avatar de Celira
    Femme Profil pro
    Développeuse PHP/Java
    Inscrit en
    Avril 2007
    Messages
    8 633
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 39
    Localisation : France

    Informations professionnelles :
    Activité : Développeuse PHP/Java
    Secteur : Industrie

    Informations forums :
    Inscription : Avril 2007
    Messages : 8 633
    Points : 16 372
    Points
    16 372
    Par défaut
    Je crois qu'on a perdu de vue le coté "liste déroulante" de l'histoire.
    Qu'est-ce que tu essayes de faire exactement ? Une zone qui s'affiche quand on clique sur un lien et qui contiendrait les checkboxes ?

    EDIT : j'ai trouvé ce tuto : Créer des listes déroulantes à choix multiples avec jQuery. C'est ce genre de choses que tu veux faire ?

  12. #12
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    201
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 201
    Points : 26
    Points
    26
    Par défaut
    j'essaye de faire une liste deroulante avec à l'interieur des case a cocher

    le code de la liste deroulante que j'ai mis plus haut fonctionne

  13. #13
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Points : 15 059
    Points
    15 059
    Par défaut
    Celira t'as donné un lien d'un tutoriel .

  14. #14
    Modératrice
    Avatar de Celira
    Femme Profil pro
    Développeuse PHP/Java
    Inscrit en
    Avril 2007
    Messages
    8 633
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 39
    Localisation : France

    Informations professionnelles :
    Activité : Développeuse PHP/Java
    Secteur : Industrie

    Informations forums :
    Inscription : Avril 2007
    Messages : 8 633
    Points : 16 372
    Points
    16 372
    Par défaut
    Le problème de mon lien, c'est que c'est un tuto qui date de 2009 basé sur un plugin jQuery (indiqué comme beta à l'époque) et qu'entre temps il y a eu le grand trou noir dans la base des plugins de jQuery. Du coup, je ne suis pas sûre que le plugin soit toujours trouvable et/ou fonctionnel

    Bon, dans tous les cas, ce genre de choses n'est pas faisable en HTML pur (donc PHP ne peut rien pour toi, vu que PHP se contente d'écrire du HTML), il va falloir que tu fasses quelque chose à base de CSS et JS.

    On va donc rediriger le problème vers les gens du Javascript.

  15. #15
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    201
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 201
    Points : 26
    Points
    26
    Par défaut
    ok merci pour les liens , je vais regarder cela de plus pres

  16. #16
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 656
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 656
    Points : 11 153
    Points
    11 153
    Par défaut
    Ou alors tout simplement :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div style="height: 100px; width: 150px; overflow:auto; border:1px #AAAAAA inset">
    <input type="checkbox" id="chk1" /><label for="chk1">Label 1</label></br>
    <input type="checkbox" id="chk2" /><label for="chk2">Label 2</label></br>
    <input type="checkbox" id="chk3" /><label for="chk3">Label 3</label></br>
    <input type="checkbox" id="chk4" /><label for="chk4">Label 4</label></br>
    <input type="checkbox" id="chk5" /><label for="chk5">Label 5</label></br>
    <input type="checkbox" id="chk6" /><label for="chk6">Label 6</label></br>
    <input type="checkbox" id="chk7" /><label for="chk7">Label 7</label></br>
    <input type="checkbox" id="chk8" /><label for="chk8">Label 8</label></br>
    <input type="checkbox" id="chk9" /><label for="chk9">Label 9</label></br>
    </div>

  17. #17
    Expert confirmé
    Avatar de pc75
    Profil pro
    Inscrit en
    Septembre 2004
    Messages
    3 662
    Détails du profil
    Informations personnelles :
    Âge : 69
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Septembre 2004
    Messages : 3 662
    Points : 4 047
    Points
    4 047
    Par défaut
    Bonjour,

    Un autre :

    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
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
     
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head><title>
     
    </title></head>
    <body>
        <form method="post" action="" id="form1">
    <div class="aspNetHidden">
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE1NjQyMDI5MzkPZBYCAgMPZBYEAgEPZBYCZg8QZBAVAQczIEl0ZW1zFQEHMyBJdGVtcxQrAwFnZGQCBQ8PFgIeBFRleHQFDlRydWUsVHJ1ZSxUcnVlZGQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFggFDGNoa0xzdEl0ZW0kMAUMY2hrTHN0SXRlbSQxBQxjaGtMc3RJdGVtJDIFDGNoa0xzdEl0ZW0kMwUMY2hrTHN0SXRlbSQ0BQxjaGtMc3RJdGVtJDUFDGNoa0xzdEl0ZW0kNgUMY2hrTHN0SXRlbSQ2UAJRW1Bagcj6qR2XxbtrJdYxeVIy0ucHNwS02jWLH+g=" />
    </div>
     
    <div class="aspNetHidden">
     
    	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCwKUuODGAwKs8ab4AgLE1a2eBwLE1cH5DwLE1dXUCALE1emvAQLE1d2xBALE1fGMDQLE1YXoBQKSoqqWDwLN3+SwD8beZKCqd7uErb0I43PIUUOTwvPqDOynHSFKGovSHObT" />
     
    </div>
        <div>
            <table>
                <tr>
                    <td valign="top" style="width: 165px">
                        <select name="ddlChkList" id="ddlChkList" onmousedown="showdivonClick()" style="width:155px;">
    	<option value="3 Items">3 Items</option>
     
    </select><div id="divChkList" style="border:black 1px solid;width:160px;height:180px;overflow:AUTO;display:none;"><table id="chkLstItem" onmouseover="showdiv()">
    	<tr>
     
    		<td><input id="chkLstItem_0" type="checkbox" name="chkLstItem$0" onclick="getSelectedItem('ListItem1','0','1','listItem');" value="1" /><label for="chkLstItem_0"><a href="javascript:void(0)" id="alst" style="text-decoration:none;color:Black; "  onclick="getSelectedItem(' ListItem1','0','1','anchor');">ListItem1</a></label></td>
    	</tr><tr>
    		<td><input id="chkLstItem_1" type="checkbox" name="chkLstItem$1" checked="checked" onclick="getSelectedItem('ListItem2','1','2','listItem');" value="2" /><label for="chkLstItem_1"><a href="javascript:void(0)" id="alst" style="text-decoration:none;color:Black; "  onclick="getSelectedItem(' ListItem2','1','2','anchor');">ListItem2</a></label></td>
    	</tr><tr>
    		<td><input id="chkLstItem_2" type="checkbox" name="chkLstItem$2" checked="checked" onclick="getSelectedItem('ListItem3','2','3','listItem');" value="3" /><label for="chkLstItem_2"><a href="javascript:void(0)" id="alst" style="text-decoration:none;color:Black; "  onclick="getSelectedItem(' ListItem3','2','3','anchor');">ListItem3</a></label></td>
    	</tr><tr>
    		<td><input id="chkLstItem_3" type="checkbox" name="chkLstItem$3" onclick="getSelectedItem('My ListItem Wraps also','3','4','listItem');" value="4" /><label for="chkLstItem_3"><a href="javascript:void(0)" id="alst" style="text-decoration:none;color:Black; "  onclick="getSelectedItem(' My ListItem Wraps also','3','4','anchor');">My ListItem Wraps also</a></label></td>
     
    	</tr><tr>
    		<td><input id="chkLstItem_4" type="checkbox" name="chkLstItem$4" checked="checked" onclick="getSelectedItem('My New ListItem5','4','5','listItem');" value="5" /><label for="chkLstItem_4"><a href="javascript:void(0)" id="alst" style="text-decoration:none;color:Black; "  onclick="getSelectedItem(' My New ListItem5','4','5','anchor');">My New ListItem5</a></label></td>
    	</tr><tr>
    		<td><input id="chkLstItem_5" type="checkbox" name="chkLstItem$5" onclick="getSelectedItem('ListItem6','5','6','listItem');" value="6" /><label for="chkLstItem_5"><a href="javascript:void(0)" id="alst" style="text-decoration:none;color:Black; "  onclick="getSelectedItem(' ListItem6','5','6','anchor');">ListItem6</a></label></td>
    	</tr><tr>
    		<td><input id="chkLstItem_6" type="checkbox" name="chkLstItem$6" onclick="getSelectedItem('ListItem7','6','7','listItem');" value="7" /><label for="chkLstItem_6"><a href="javascript:void(0)" id="alst" style="text-decoration:none;color:Black; "  onclick="getSelectedItem(' ListItem7','6','7','anchor');">ListItem7</a></label></td>
    	</tr>
     
    </table></div>
                    </td>
                    <td valign="top">
                        <input type="submit" name="btn" value="Get Checked" id="btn" />
                    </td>
                    <td valign="top">
                        <span id="lblSelectedItem">True,True,True</span>
                    </td>
                </tr>
     
            </table>
            <input type="hidden" name="hidList" id="hidList" value="3 Items" />
        </div>
        </form>
    </body>
    </html>
     
    <script language="javascript" type="text/javascript">
     
        function showdiv() {
            document.getElementById("divChkList").style.display = "block";
        }
     
        function showdivonClick() {
            var objDLL = document.getElementById("divChkList");
            if (objDLL.style.display == "block")
                objDLL.style.display = "none";
            else {
                objDLL.style.display = "block";
            }
        }
     
        function getSelectedItem(lstValue, lstNo, lstID, ctrlType) {
            var noItemChecked = 0;
            var ddlReport = document.getElementById("ddlChkList");
            var selectedItems = "";
            var arr = document.getElementById("chkLstItem").getElementsByTagName('input');
            var arrlbl = document.getElementById("chkLstItem").getElementsByTagName('label');
            var objLstId = document.getElementById('hidList');
            for (i = 0; i < arr.length; i++) {
                checkbox = arr[i];
                if (i == lstNo) {
                    if (ctrlType == 'anchor') {
                        if (!checkbox.checked) {
                            checkbox.checked = true;
                        }
                        else {
                            checkbox.checked = false;
                        }
                    }
                }
                if (checkbox.checked) {
                    if (selectedItems == "") {
                        selectedItems = arrlbl[i].innerText;
                    }
                    else {
                        selectedItems = selectedItems + "," + arrlbl[i].innerText;
                    }
                    noItemChecked = noItemChecked + 1;
                }
            }
     
     
     
     
            ddlReport.title = selectedItems;
            var Text = ddlReport.options[ddlReport.selectedIndex].text;
            if (noItemChecked == 1)
                ddlReport.options[ddlReport.selectedIndex].text = lstValue;
            else
                ddlReport.options[ddlReport.selectedIndex].text = noItemChecked + " Items";
     
            document.getElementById('hidList').value = ddlReport.options[ddlReport.selectedIndex].text;
        }
     
     
     
     
        document.onclick = check;
        function check(e) {
            var target = (e && e.target) || (event && event.srcElement);
            var obj = document.getElementById('divChkList');
            var obj1 = document.getElementById('ddlChkList');
     
            if (target.id != "alst" && !target.id.match("chkLstItem")) {
                if (!(target == obj || target == obj1)) {//  || target == obj2)) {
                    obj.style.display = 'none'
                }
                else if (target == obj || target == obj1) {// || target == obj2) {
                    if (obj.style.display == 'block') {
                        obj.style.display = 'block';
                    }
                    else {
                        obj.style.display = 'none';
                        document.getElementById('ddlChkList').blur();
                    }
                }
            }
        }
     
    </script>

Discussions similaires

  1. [AC-2007] Liste déroulante avec cases à cocher
    Par NadiaGeo dans le forum Access
    Réponses: 1
    Dernier message: 22/04/2015, 22h18
  2. [AC-2007] lier une liste déroulante à 3 cases à cocher
    Par cinkiem_as dans le forum Access
    Réponses: 3
    Dernier message: 21/03/2014, 09h55
  3. Réponses: 33
    Dernier message: 27/09/2012, 12h46
  4. Réponses: 2
    Dernier message: 20/03/2012, 17h43
  5. Réponses: 4
    Dernier message: 01/04/2007, 15h57

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