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 :

Petit script tout cocher - tout décocher


Sujet :

JavaScript

  1. #1
    Membre habitué
    Petit script tout cocher - tout décocher
    Bonjour,
    N'étant pas doué en javascript, j'essaie d'adapter des scripts trouvés sur le web.
    Je voudrais faire fonctionner un pour cocher / décocher / inverser la sélection, je ne trouve pas l'erreur : (script sans doute de Eric Marcus en 2006, probablement modifié)
    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
    <script type="text/javascript">
    <!--
    // a_faire = '0' pour tout decocher 
    // a_faire = '1' pour tout cocher 
    // a_faire = '2' pour inverser la selection 
    function GereChkbox(conteneur, a_faire) {
    var blnEtat=null;
    var Chckboxes = document.getElementById(conteneur).getElementsByTagName('input');
      for(var i=0;i<Chckboxes.length;i++) {
        var Chckbox = Chckboxes[i];
        if (Chckbox.nodeName=="INPUT") {
          if (Chckbox.getAttribute("type")=="checkbox") {
            blnEtat = (a_faire=='0') ? false : (a_faire=='1') ? true : (Chckbox.checked) ? false : true;
            Chckbox.checked=blnEtat;
          }
        }
      }
    }
    -->
    </script>


    Avant mon tableau :
    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <form method="post" enctype="multipart/form-data" action="rap.saisie.exec.php"  name="select_lignes">
     
    <input type="button" value="Tout cocher" onClick="GereChkbox('div_chck','1');">&nbsp;&nbsp;&nbsp;
    <input type="button" value="Tout d&eacute;cocher" onClick="GereChkbox('div_chck','0');">&nbsp;&nbsp;&nbsp;
    <input type="button" value="Inverser la s&eacute;lection" onClick="GereChkbox('div_chck','2');">
    <div id="div_chck">


    Dans mon tableau : (généré en php)

    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
    ...
    <tr>
    	  <td><input type="checkbox" name="ligne%248817" id="ligne%248817" value="1"><label for="ligne%248817"> . </label></td>
    </tr>
    <tr>
    	  <td><input type="checkbox" name="ligne%248827" id="ligne%248827" value="2"><label for="ligne%248827"> . </label></td>
    </tr>
    ...
    </table>
    <br /><br />
    <center><input border="0" name="select_lignes"  src="../images/btn_valider.gif" type="image" value="submit" width="93" height="22" alt="Affecter"></center>
     
    </div>
    </form>

    Qu'est-ce qui ne va pas ?
    Merci

  2. #2
    Membre expert
    j'ai un peut modifie le script

    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
    <button id="checkAll">Tout cocher</button>
    <button id="uncheckAll">Tout d&eacute;cocher</button>
    <button id="invertAllCheck">Inverser la s&eacute;lection</button>
     
    <div id="div_chck">
        <table>
            <tr>
              <td><input type="checkbox" name="ligne%248817" id="ligne%248817" value="1"><label for="ligne%248817"> . </label></td>
            </tr>
            <tr>
              <td><input type="checkbox" name="ligne%248827" id="ligne%248827" value="2"><label for="ligne%248827"> . </label></td>
            </tr>
        </table>
    </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
    21
    22
    23
    24
    25
    26
    27
    28
    29
    document.getElementById('checkAll').addEventListener('click', () => {
        checkAll('div_chck');
    });
    document.getElementById('uncheckAll').addEventListener('click', () => {
        uncheckAll('div_chck');
    });
    document.getElementById('invertAllCheck').addEventListener('click', () => {
        invertAllCheck('div_chck');
    });
    function checkAll(targetId) {
        GereChkbox(targetId, 1);
    }
    function uncheckAll(targetId) {
        GereChkbox(targetId, 0);
    }
    function invertAllCheck(targetId) {
        GereChkbox(targetId, 2);
    }
    function GereChkbox(conteneur, action) {
        document.querySelectorAll(`#${conteneur} input`).forEach(input => {
            if(action === 1) {
                input.checked = true;
            } else if (action === 0) {
                input.checked = false;
            } else {
                input.checked = !input.checked;
            }
        });
    }
    j'ai cree 3 functions intermediaires pour plus de clarete
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  3. #3
    Membre habitué
    J'ai intégré ce code, les 3 boutons font office de validation de formulaire, mais sans rien faire au niveau des checkbox.
    Du coup j'ai déplacé ma ligne <form> juste après les boutons, les boutons ne valident pas mon formulaire mais ils n'ont aucun effet sur les checkbox.
    Il faudrait nommer les <button> autrement ? (pour qu'ils ne valident pas le formulaire)

    Merci

  4. #4
    Membre expert
    les <forms> c'est pour des donnees destines a des formulaires (qu'on envoit au serveur lors de la validation)
    si tu n'envois pas les donnees au serveur, ca ne sert a rien de les mettre dans un <form>
    theoriquement, c'est un <input type="submit"> qui "valide & envoie" le formulaire, c'est pour ca que j'ai mis des <button>

    as-tu place le JS a la fin de ton html ?
    as-tu des erreurs dans la console ?
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  5. #5
    Membre habitué
    Bonjour,
    J'ai bien un form pour envoyer les données (justement les cases checkbox cochées)
    Par contre je mets le script dans l'entête de page html :
    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
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    <!DOCTYPE HTML>
     
    <html lang="fr">
     
    <head>
    <title>rapp</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="generator" content="Notepad++">
    <link rel="stylesheet" type="text/css" href="../styles/feuille_style.css">
    <link rel="stylesheet" type="text/css" href="../styles/feuille_style_bloc.css">
    <script type="text/javascript">
    <!--
    document.getElementById('checkAll').addEventListener('click', () => {
        checkAll('div_chck');
    });
    document.getElementById('uncheckAll').addEventListener('click', () => {
        uncheckAll('div_chck');
    });
    document.getElementById('invertAllCheck').addEventListener('click', () => {
        invertAllCheck('div_chck');
    });
    function checkAll(targetId) {
        GereChkbox(targetId, 1);
    }
    function uncheckAll(targetId) {
        GereChkbox(targetId, 0);
    }
    function invertAllCheck(targetId) {
        GereChkbox(targetId, 2);
    }
    function GereChkbox(conteneur, action) {
        document.querySelectorAll(`#${conteneur} input`).forEach(input => {
            if(action === 1) {
                input.checked = true;
            } else if (action === 0) {
                input.checked = false;
            } else {
                input.checked = !input.checked;
            }
        });
    }
    -->
    </script>
     
    </head>


    Ensuite j'ai un premier tableau indépendant, puis mon formulaire dans lequel je veux cocher certaines lignes, toutes ou aucune pour les envoyer via le formulaire.

    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
    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
    <font class="titreajoutmodif">BL :</font>&nbsp;&nbsp;<br /><br />
    &nbsp;&nbsp;&nbsp;<button id="checkAll">Tout cocher</button>
    <button id="uncheckAll">Tout d&eacute;cocher</button>
    <button id="invertAllCheck">Inverser la s&eacute;lection</button>
    <form method="post" enctype="multipart/form-data" action="rap.saisie.exec.php"  name="select_lignes">
       <input type="hidden" name="rap_lot_id" value="2512">
     
    <div id="div_chck">
    <br />
    </center>
    <table border="1" align="center">
    <tr>
          <td> </td>
          <td>Date</td>
    	  <td>Code </td>
    	  <td>Nom</td>
    	  <td>Code2</td>
    	  <td>Nom2</td>
    	  <td>Nom3</td>
    	  <td>Produit</td>
    	  <td>Lib produit</td>
    	  <td>Qte unite vente</td>
    	  <td>Code unit&eacute; vente</td>
    	  <td>Prix net unitaire</td>
    	  <td>S</td>
    	  <td>No bon</td>
    	  <td>No facture</td>
    </tr>
     
    	<tr>
    	  <td><input type="checkbox" name="ligne%256878" id="ligne%256878" value="1"><label for="ligne%256878"> . </label></td>
    	  <td>2020-03-03</td>
    	  <td>102507</td>
    	  <td>xxxxxx</td>
    	  <td>102507</td>
    	  <td>xxxxxx</td>
    	  <td>xxxxxx</td>
    	  <td>xxxxxx</td>
    	  <td>xxxxxx</td>
    	  <td>xxxxxx</td>
    	  <td>xxxxxx</td>
    	  <td>xxxxxx</td>
    	  <td>xxxxxx</td>
    	  <td>62395</td>
    	  <td>0</td>
    	</tr>
     
    	<tr>
    	  <td><input type="checkbox" name="ligne%256880" id="ligne%256880" value="2"><label for="ligne%256880"> . </label></td>
    	  <td>2020-03-03</td>
    	  <td>102507</td>
    	  <td>xxxxxx</td>
    	  <td>102507</td>
    	  <td>xxxxxx</td>
    	  <td>xxxxxx</td>
    	  <td>xxxxxx</td>
    	  <td>xxxxxx</td>
    	  <td>xxxxxx</td>
    	  <td>xxxxxx</td>
    	  <td>xxxxxx</td>
    	  <td>xxxxxx</td>
    	  <td>62395</td>
    	  <td>0</td>
    	</tr>
    	.....
     
    	</table>
    <br /><br />
    <center><input border="0" name="select_lignes"  src="../images/btn_valider.gif" type="submit"  width="93" height="22" alt="Affecter"></center>
     
    </div>
    </form>
     
    <br /><br />
    <center>
    <a href="index.php">Retour</a>
    <br /><br />
    </center>
     
    </body>
     
    </html>


    J'ai testé de mettre le script à la fin du fichier html mais cela ne change rien. Je n'arrive toujours pas à utiliser les boutons


    Sinon, j'ai effectivement une erreur dans la console (que je viens de découvrir !)
    Uncaught TypeError: Cannot read property 'addEventListener' of null
    at rap.saisie2.php:14
    merci

  6. #6
    Membre habitué
    A priori l'erreur viendrait du fait qu'il faut mettre le script dans le body et non le head.
    Ce que j'ai fait. Mais j'ai toujours l'erreur.

  7. #7
    Membre expert
    si ton JS est en haut de page, il faut que tu encapsule les listeners que je t'ai fournis par un domcontentloaded
    Code javascript :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    document.addEventListener('DOMContentLoaded', () {
    document.getElementById('checkAll').addEventListener('click', () => {
        checkAll('div_chck');
    });
    document.getElementById('uncheckAll').addEventListener('click', () => {
        uncheckAll('div_chck');
    });
    document.getElementById('invertAllCheck').addEventListener('click', () => {
        invertAllCheck('div_chck');
    });
    });
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  8. #8
    Expert confirmé
    Le code de Doksuri fonctionne sans problème même sans ajouter un listener sur document; (ce qui est logique)

  9. #9
    Membre habitué
    Merci de vos réponses. Je reviens sur ce script, je n'y arrive toujours pas.
    J'ai testé :
    En entête (<head>) : je ne mets rien de particulier.
    Dans le corps de la page :
    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
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    <button id="checkAll">Tout cocher</button>
    <button id="uncheckAll">Tout d&eacute;cocher</button>
    <button id="invertAllCheck">Inverser la s&eacute;lection</button>
    <form method="post" enctype="multipart/form-data" action="rap.saisie.exec.php"  name="select_lignes">
    <div id="div_chck">
    ...
    <td><input type="checkbox" name="ligne%252694" id="ligne%252694" value="1"><label for="ligne%252694"> . </label></td>
    ...
    <td><input type="checkbox" name="ligne%253469" id="ligne%253469" value="2"><label for="ligne%253469"> . </label></td>
    ...
    <input border="0" name="select_lignes"  src="../images/btn_valider.gif" type="submit"  width="93" height="22" alt="Affecter"></center>
     
    </div>
    </form>
    <script type="text/javascript">
    <!--
    document.getElementById('checkAll').addEventListener('click', () => {
        checkAll('div_chck');
    });
    document.getElementById('uncheckAll').addEventListener('click', () => {
        uncheckAll('div_chck');
    });
    document.getElementById('invertAllCheck').addEventListener('click', () => {
        invertAllCheck('div_chck');
    });
    function checkAll(targetId) {
        GereChkbox(targetId, 1);
    }
    function uncheckAll(targetId) {
        GereChkbox(targetId, 0);
    }
    function invertAllCheck(targetId) {
        GereChkbox(targetId, 2);
    }
    function GereChkbox(conteneur, action) {
        document.querySelectorAll(`#${conteneur} input`).forEach(input => {
            if(action === 1) {
                input.checked = true;
            } else if (action === 0) {
                input.checked = false;
            } else {
                input.checked = !input.checked;
            }
        });
    }
    -->
    </script>
    </body>
    </html>


    Note : je n'ai pas d'erreur dans la console avec cette page.

    J'essaye l'autre solution : mettre le script dans le head

  10. #10
    Membre habitué
    Si je mets le script dans le head:

    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
    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
    <head>
    <title>...</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="generator" content="HAPedit 3.1">
    <link rel="stylesheet" type="text/css" href="../styles/feuille_style.css">
    <link rel="stylesheet" type="text/css" href="../styles/feuille_style_bloc.css">
     
    <script type="text/javascript">
    <!--
    document.addEventListener('DOMContentLoaded', () {
    document.getElementById('checkAll').addEventListener('click', () => {
        checkAll('div_chck');
    });
    document.getElementById('uncheckAll').addEventListener('click', () => {
        uncheckAll('div_chck');
    });
    document.getElementById('invertAllCheck').addEventListener('click', () => {
        invertAllCheck('div_chck');
    });
    function checkAll(targetId) {
        GereChkbox(targetId, 1);
    };
    function uncheckAll(targetId) {
        GereChkbox(targetId, 0);
    };
    function invertAllCheck(targetId) {
        GereChkbox(targetId, 2);
    };
    function GereChkbox(conteneur, action) {
        document.querySelectorAll(`#${conteneur} input`).forEach(input => {
            if(action === 1) {
                input.checked = true;
            } else if (action === 0) {
                input.checked = false;
            } else {
                input.checked = !input.checked;
            }
        });
    };
    };
    -->
    </script>
    </head>
    <body>
    ...
    <button id="checkAll">Tout cocher</button>
    <button id="uncheckAll">Tout d&eacute;cocher</button>
    <button id="invertAllCheck">Inverser la s&eacute;lection</button>
    <form method="post" enctype="multipart/form-data" action="rap.saisie.exec.php"  name="select_lignes">
    <div id="div_chck">
    ...
    <td><input type="checkbox" name="ligne%252694" id="ligne%252694" value="1"><label for="ligne%252694"> . </label></td>
    ...
    <td><input type="checkbox" name="ligne%253469" id="ligne%253469" value="2"><label for="ligne%253469"> . </label></td>
    ...
    <input border="0" name="select_lignes"  src="../images/btn_valider.gif" type="submit"  width="93" height="22" alt="Affecter"></center>
     
    </div>
    </form>
    ...


    Cela ne fonctionne pas non plus.
    J'ai une erreur dans la console : Uncaught SyntaxError : Unexpected token ')', ligne 15.
    Ligne 15 dans le source html =
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    document.addEventListener('DOMContentLoaded', () {


    J'ai testé de mettre les fonctions entre () mais j'ai une erreur identique ligne 16 avec un .
    Ligne 16 =
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    document.getElementById('checkAll').addEventListener('click', () => {


    Je continue d'autres tests. Mais je suis preneur de vos idées.

    Merci

  11. #11
    Expert confirmé
    Code javascript :Sélectionner tout -Visualiser dans une fenêtre à part
    document.addEventListener('DOMContentLoaded', () => {


    dernière ligne du script:
    )};
    et non
    };
    (tu as ouvert un listener avec une parenthèse: il faut la refermer...)

  12. #12
    Membre habitué
    Je tourne en rond : j'ai bien ajouté une parenthèse à la fin : }); plutôt que )}; pour ne pas avoir d'erreur de syntaxe.
    Mais mon script ne fonctionne toujours pas, les boutons me valident le formulaire.
    Du coup je mets ma ligne form juste après les boutons, les boutons ne valident plus le formulaire mais ils ne font rien.
    Je dois avoir autre chose dans ma page qui bloque. Quels seraient les instructions à vérifier ? (compatibilité avec javascript, restrictions, ...)
    Merci

  13. #13
    Membre expert
    tu peux nous montrer le html complet ?

    ps : <!-- --> ce sont des commentaires html et non js
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  14. #14
    Membre habitué
    Je sais que <!-- c'est un commentaire html. Je ne sais pas ce que ça fait pour javascript. Il faut en mettre ou non ? J'ai testé de les enlever, cela ne change rien.

    Voici le script html complet (j'ai enlevé des lignes de tableau, ce sont toutes les mêmes)
    J'ai testé directement en html pour voir, il ne fonctionne pas (ce qui est cohérent avec mon php)

    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
    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
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    <!DOCTYPE HTML>
     
    <html lang="fr">
     
    <head>
    <title>Titre</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="generator" content="Notepad++">
    <link rel="stylesheet" type="text/css" href="../styles/feuille_style.css">
    <link rel="stylesheet" type="text/css" href="../styles/feuille_style_bloc.css">
     
    <script type="text/javascript">
     
    document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('checkAll').addEventListener('click', () => {
        checkAll('div_chck');
    });
    document.getElementById('uncheckAll').addEventListener('click', () => {
        uncheckAll('div_chck');
    });
    document.getElementById('invertAllCheck').addEventListener('click', () => {
        invertAllCheck('div_chck');
    });
    function checkAll(targetId) {
        GereChkbox(targetId, 1);
    };
    function uncheckAll(targetId) {
        GereChkbox(targetId, 0);
    };
    function invertAllCheck(targetId) {
        GereChkbox(targetId, 2);
    };
    function GereChkbox(conteneur, action) {
        document.querySelectorAll(`#${conteneur} input`).forEach(input => {
            if(action === 1) {
                input.checked = true;
            } else if (action === 0) {
                input.checked = false;
            } else {
                input.checked = !input.checked;
            }
        });
    };
    });
     
    </script>
     
     
    </head>
     
    <body>
     
     
    <br />
    <br />
     
    <font class="titrepage">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u>Rap</u>
    </font>
    <br /><br /><br />
     
    <center>
    &nbsp;&nbsp;&nbsp;<font class="titreajoutmodif">Typ Page :</font>&nbsp;&nbsp;
    Texte<br />
      Texte<br />
      Debut : 2020-07-06 - Fin : 0000-00-00
     
    <br /><br />
    &nbsp;&nbsp;&nbsp;<font class="titreajoutmodif">Com :</font>&nbsp;&nbsp;
    </center>
     
    <table border="1" align="center">
    <tr>
    	  <td>Date</td>
    	  <td>Type</td>
    	  <td>Col3</td>
    	  <td>Col4</td>
    	  <td>Col5</td>
    	  <td>Col6</td>
    	  <td>Col7</td>
    	  <td>Col8</td>
    	  <td>Col9</td>
    	  <td>Col10</td>
    	  <td>Col11</td>
    	  <td>Col12</td>
    </tr>
     
    	<tr>
    	  <td>2020-07-06</td>
    	  <td>m</td>
    	  <td>M</td>
    	  <td>P</td>
    	  <td>1</td>
    	  <td>T</td>
    	  <td>6</td>
    	  <td>2</td>
    	  <td></td>
    	  <td>7</td>
    	  <td>3</td>
    	  <td>0.018</td>
    	</tr>
     
    	<tr>
    	  <td>2020-07-06</td>
    	  <td>m</td>
    	  <td>M</td>
    	  <td>P</td>
    	  <td>3</td>
    	  <td>T</td>
    	  <td>2</td>
    	  <td>2</td>
    	  <td></td>
    	  <td>7</td>
    	  <td>3</td>
    	  <td>0.035</td>
    	</tr>
     
    	<tr>
    	  <td>2020-07-06</td>
    	  <td>p</td>
    	  <td>A</td>
    	  <td>G</td>
    	  <td>3</td>
    	  <td>T</td>
    	  <td>1</td>
    	  <td>2</td>
    	  <td></td>
    	  <td>7</td>
    	  <td>3</td>
    	  <td>3.467</td>
    	</tr>
    	</table>
     
    <br /><br />
    <center>
    &nbsp;&nbsp;&nbsp;<font class="titreajoutmodif">B:</font>&nbsp;&nbsp;<br /><br />
     
     
    &nbsp;&nbsp;&nbsp;<button id="checkAll">Tout cocher</button>
    <button id="uncheckAll">Tout d&eacute;cocher</button>
    <button id="invertAllCheck">Inverser la s&eacute;lection</button>
    <form method="post" enctype="multipart/form-data" action="rap.saisie.exec.php"  name="select_lignes">
     
       <input type="hidden" name="rap_lot_id" value="2538">
     
    <div id="div_chck">
    <br />
    </center>
     
    <table border="1" align="center">
    <tr>
          <td> </td>
          <td>Date</td>
    	  <td>Col2</td>
    	  <td>Nol3</td>
    	  <td>Col4</td>
    	  <td>Col5</td>
    	  <td>Col6</td>
    	  <td>Col7</td>
    	  <td>Col8</td>
    	  <td>Col9</td>
    	  <td>Col10</td>
    	  <td>Col11</td>
    	  <td>Col12</td>
    	  <td>Col13</td>
    	  <td>Col14</td>
    	  <td>Col15</td>
    </tr>
     
    	<tr>
    	  <td><input type="checkbox" name="ligne%260241" id="ligne%260241" value="1"><label for="ligne%260241"> . </label></td>
    	  <td>2020-03-09</td>
    	  <td>1</td>
    	  <td>V</td>
    	  <td>1</td>
    	  <td>G</td>
    	  <td>L</td>
    	  <td>A</td>
    	  <td>F</td>
    	  <td> 
    	            m<input type="radio" name="blp_type%260241" value="m" /> &nbsp;&nbsp;
    	            e<input type="radio" name="blp_type%260241" value="e" /> &nbsp;&nbsp;
    				p<input type="radio" name="blp_type%260241" value="p" /> &nbsp;&nbsp;
    				a<input type="radio" name="blp_type%260241" value="a" checked/>
    	  </td>			
     
    	  <td>9.78</td>
    	  <td>T</td>
    	  <td>245.5</td>
    	  <td>2</td>
    	  <td>62944</td>
    	  <td>31986</td>
    	</tr>
     
    	<tr>
    	  <td><input type="checkbox" name="ligne%271300" id="ligne%271300" value="2"><label for="ligne%271300"> . </label></td>
    	  <td>2020-03-27</td>
    	  <td>1</td>
    	  <td>V</td>
    	  <td>1</td>
    	  <td>G</td>
    	  <td>L</td>
    	  <td>A</td>
    	  <td>F</td>
    	  <td> 
    	            m<input type="radio" name="blp_type%271300" value="m" /> &nbsp;&nbsp;
    	            e<input type="radio" name="blp_type%271300" value="e" /> &nbsp;&nbsp;
    				p<input type="radio" name="blp_type%271300" value="p" /> &nbsp;&nbsp;
    				a<input type="radio" name="blp_type%271300" value="a" checked/>
    	  </td>			
     
    	  <td>4.9</td>
    	  <td>T</td>
    	  <td>245.1</td>
    	  <td>1</td>
    	  <td>64504</td>
    	  <td>32717</td>
    	</tr>
     
    	<tr>
    	  <td><input type="checkbox" name="ligne%271299" id="ligne%271299" value="3"><label for="ligne%271299"> . </label></td>
    	  <td>2020-03-27</td>
    	  <td>1</td>
    	  <td>V</td>
    	  <td>1</td>
    	  <td>G</td>
    	  <td>L</td>
    	  <td>A</td>
    	  <td>F</td>
    	  <td> 
    	            m<input type="radio" name="blp_type%271299" value="m" /> &nbsp;&nbsp;
    	            e<input type="radio" name="blp_type%271299" value="e" /> &nbsp;&nbsp;
    				p<input type="radio" name="blp_type%271299" value="p" /> &nbsp;&nbsp;
    				a<input type="radio" name="blp_type%271299" value="a" checked/>
    	  </td>			
     
    	  <td>7.86</td>
    	  <td>T</td>
    	  <td>245.1</td>
    	  <td>2</td>
    	  <td>64503</td>
    	  <td>32717</td>
    	</tr>
     
    	<tr>
    	  <td><input type="checkbox" name="ligne%280604" id="ligne%280604" value="4"><label for="ligne%280604"> . </label></td>
    	  <td>2020-04-10</td>
    	  <td>1</td>
    	  <td>V</td>
    	  <td>1</td>
    	  <td>G</td>
    	  <td>L</td>
    	  <td>A</td>
    	  <td>F</td>
    	  <td> 
    	            m<input type="radio" name="blp_type%280604" value="m" /> &nbsp;&nbsp;
    	            e<input type="radio" name="blp_type%280604" value="e" /> &nbsp;&nbsp;
    				p<input type="radio" name="blp_type%280604" value="p" /> &nbsp;&nbsp;
    				a<input type="radio" name="blp_type%280604" value="a" checked/>
    	  </td>			
     
    	  <td>9.46</td>
    	  <td>T</td>
    	  <td>255.1</td>
    	  <td>2</td>
    	  <td>65643</td>
    	  <td>33270</td>
    	</tr>
    	</table>
    <br /><br />
    <center><!--<input border="0" name="select_lignes"  src="../images/btn_valider.gif" type="submit"  width="93" height="22" alt="Affecter"></center>-->
    <input border="0" name="select_lignes"  src="../images/btn_valider.gif" type="image" value="submit" width="93" height="22" alt="Affecter">
     
    </div>
    </form>
     
     
    <br /><br />
    <center>
    <a href="index.php">Retour</a>
    <br /><br />
    </center>
     
    </body>
     
    </html>


    En tout cas merci de ta patience !

  15. #15
    Expert confirmé
    Et le fait est que ce script fonctionne:
    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
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('checkAll').addEventListener('click', () => {
        checkAll('div_chck');
    });
    document.getElementById('uncheckAll').addEventListener('click', () => {
        uncheckAll('div_chck');
    });
    document.getElementById('invertAllCheck').addEventListener('click', () => {
        invertAllCheck('div_chck');
    });
    })
     
    function checkAll(targetId) {
        GereChkbox(targetId, 1);
    };
    function uncheckAll(targetId) {
        GereChkbox(targetId, 0);
    };
    function invertAllCheck(targetId) {
        GereChkbox(targetId, 2);
    };
    function GereChkbox(conteneur, action) {
        document.querySelectorAll(`#${conteneur} input`).forEach(input => {
            if(action === 1) {
                input.checked = action;
            } else if (action === 0) {
                input.checked = action;
            } else {
                input.checked = !input.checked;
            }
        });
    };

    N'écris rien d'autre...

  16. #16
    Membre habitué
    Non ça ne fonctionne pas. J'ai juste remplacé le script.

  17. #17
    Membre expert
    j'ai compris ton probleme : dans ton 1er exemple (sur lequel je me suis appuye pour faire le petit script), je pensais que tes checkbox etaient dans ton div "div_chck"
    or, dans le dernier code fourni : ton div div_chck est vide, tes checkbox sont dans ton table

    => il te suffit de supprimer l'id du div div_chck et de le mettre sur ton table
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    ...
    <div id="div_chck">
    <br />
    </center>
     
    <table border="1" align="center">

    devient :
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    ...
    <div>
    <br />
    </center>
     
    <table border="1" align="center" id="div_chck">
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  18. #18
    Membre habitué
    Yes ! c'est bon pour les checkbox !

    Par contre, comment ne pas prendre en compte les radio ? Je ne veux pas que les boutons interfèrent ou ne modifient les radio.
    Tout cocher active les radio de droite (et peut-être les autres valeurs aussi)
    Tout décocher enlève toutes les valeurs des radio
    Inverser, je sais pas trop ce qu'il fait.

    Merci

  19. #19
    Membre expert
    tu peux modifier le selecteur dans la function GereChkbox

    => document.querySelectorAll(`#${conteneur} input[type="checkbox"]`).forEach(input => {
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  20. #20
    Membre habitué
    C'est bon ça ! Merci à vous deux

###raw>template_hook.ano_emploi###