cocher plusieurs checkbox

07 oct. 2009, 18:09

Bonjour à tous,

Je cherche à créer une case à cocher, qui une fois cochée, me permettrait de cocher toutes les checkbox dont l'id commence par '1-'.
Toutes mes checkbox sont contenues dans différentes cellules d'un tableau.

Code : Tout sélectionner

<input name="1-1" id="1-1" value="1" checked="checked" type="checkbox">
...
<input name="1-7" id="1-8" value="1" checked="checked" type="checkbox">
<input name="1-8" id="1-8" value="1" checked="checked" type="checkbox">

Je suis débutant en javascript, je le précise !

Comment faire ?

08 oct. 2009, 09:22

Il te sera assez fastidieux de le faire depuis zero, par contre en utilsiant une bibliothèque javascript (Je ne connais que Jquery donc je vais te montrer avec celle là

) ça devrait pas être trop dur!
Voilà ce que ça donnerait pour ton code html:

Code : Tout sélectionner

// On attend que le document soit chargé
$(document).ready(function(){

    // Si on clique sur la checkbox désignée
    $('#1-1').click(function(){
        
        // On coche toute les checkbox dont l'id commence par '1-'
        $('input[type="checkbox"][id^="1-"]).attr('checked','checked'); // j'ai un doute entre 'checked' et 'selected' à toi de tester ;)
    });

});

Tu peux même améliorer en changeant

Code : Tout sélectionner

$('input[type="checkbox"][id^="1-"]).attr('checked','checked');

par

Code : Tout sélectionner

$('input[type="checkbox"][id^="1-"]).attr('checked',$(this).attr('checked'));
// En sachant que le $(this) renvoi à la première checkbox $('#1-1')

Ce qui te permetra aussi de "décocher" toute les coches si tu décoches la première...

08 oct. 2009, 13:07

j'ai un doute entre 'checked' et 'selected' à toi de tester

checked pour les cases à cocher et les boutons radio (input[type="checkbox"] et input[type="radio"]), selected pour les menus de sélection (élément option).

08 oct. 2009, 14:03

Oups... j'édite de ce pas mon messages

12 oct. 2009, 10:09

Merci pour l'idée!

Mon nombre de checkbox etant fixe, j'ai trouvé plus simple en fait :

Code : Tout sélectionner

<input ... onchange="document.getElementById('1-8').checked=this.checked; document.getElementById('1-9').checked=this.checked;etc...">

Le problème c'est que sa marche TB sous firefox et que cela fait même double usage (cocher/decocher) mais ca ne fonctionne pas sous IE...
pourtant l'instruction est du pur javascript :

Code : Tout sélectionner

"document.getElementById('1-8').checked=this.checked;

Que faut-il corriger pour IE ?

12 oct. 2009, 10:23

Essaye simplement

Code : Tout sélectionner

document.getElementById('1-8').checked='checked';

pour voir?
Et puis pour faire plus propre tu peux quand même te le mettre dans une petite fonction

12 oct. 2009, 10:38

[jojolapine]

Ca marche sous firefox mais sous IE...

12 oct. 2009, 10:43

Après recherche il apparait que IE attende un booléen pour la valeur de l'attribut checked...
Ou alors utilise

Code : Tout sélectionner

elmt.setAttribute('checked','checked');

Par contre tout ça ne fonctionnera pas si le document n'est pas chargé entièrement...
Donc il faut que tu ajoutes un évènement sur le onload du body, et si tu en as déjà, regarde du côté de http://simonwillison.net/2004/May/26/addLoadEvent/
Et si tu veux pas t'e********er avec toutes ces compatibilité, et bien utilises un framework

12 oct. 2009, 10:59

je comprends pas tout ce que tu me dis mais j'ai essayé avec du booleen mais ca ne marche pas plus :

Code : Tout sélectionner

document.getElementById('1-8').checked=true
document.getElementById('1-8').checked=1

12 oct. 2009, 11:22

En fait le problème pour IE c'est que tu indique dans le onchange de ton premier checkbox qu'il faut agir sur d'autres checkbox placés après dans la page...
Et lorsqu'IE analyse ces instructions, il n'a pas finit de chargé la page et donc les autres checkbox...
Du coup ça ne rime à rien pour lui le getElementById() sur un élément inexistant...
Donc tu dois attacher les différentes actions sur tes éléments après le chargement complet de la page, pour rester le plus compatible possible...
Il y a plusieurs techniques pour ça...
Tu peux mettre ton code javascript tout en bas de page (pour peu qu'il soit non-intrusif), utiliser l'évènement onload de l'élément <body>, ou encore utiliser des bibliothèques javascript qui gère ça plus simplement (dans mon exemple avec jquery, c'est $(document).load() qui joue ce rôle...)

12 oct. 2009, 11:30

Ah ok!

Mais pourtant toutes mes checkbox sont situées avant ma chk "tout cocher".

ET je n'arrive pas à mettre la main sur script tout simple qui dise de cocher telle case si untel est coché.
C'est si compliqué que ca ?

12 oct. 2009, 11:31

Donnes nous le code complet (simplifié hein... veut pas tout le reste de la page

) html/js de tes tests pour pouvoir tester chez nous...

12 oct. 2009, 11:44

Voila une version allégée qui fonctionne donc sous FF mais pas IE :

<HTML>
<HEAD>
<TITLE>Titre</TITLE>
</HEAD>
<BODY >
<FORM ACTION="planning.php" METHOD="POST" name="form" >
  <BR>
  <BR>
   <input name="1-8" type="checkbox" id="1-8" value="1" >
    <input name="1-9" type="checkbox" id="1-9" value="1" >
    <input name="1-10" type="checkbox" id="1-10" value="1" >
    <input name="1-11" type="checkbox" id="1-11" value="1" >
    <br>
    <br>
    <input name="1-tc" type="checkbox" id="1-tc" value="1" onchange="document.getElementById('1-8').checked=this.checked;document.getElementById('1-9').checked=this.checked;document.getElementById('1-10').checked=this.checked;document.getElementById('1-11').checked=this.checked;">
				
</FORM>
</BODY>
</HTML>

12 oct. 2009, 13:17

Alors en fait le problème ne venait pas de tout ce que je t'ai listé pus haut (puisque la checkbox est après dans le dom)
Mais de l'évènement "onchange" qui ne passe pas visiblement...
Remplace le par un "onclick" et tu verras, ça fonctionne parfaitement

12 oct. 2009, 14:35

Tout ça à cause de onclick....et ba
merci infiniment!!

Donc IE ne gère pas le OnChange ?

cocher plusieurs checkbox

Qui est en ligne