Page 1 sur 2
cocher plusieurs checkbox
Posté : 07 oct. 2009, 18:09
par toony.m
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 ?
Re: cocher plusieurs checkbox
Posté : 08 oct. 2009, 09:22
par jojolapine
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...
Re: cocher plusieurs checkbox
Posté : 08 oct. 2009, 13:07
par Victor BRITO
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).
Re: cocher plusieurs checkbox
Posté : 08 oct. 2009, 14:03
par jojolapine
Oups... j'édite de ce pas mon messages
Re: cocher plusieurs checkbox
Posté : 12 oct. 2009, 10:09
par toony.m
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 :
Que faut-il corriger pour IE ?
Re: cocher plusieurs checkbox
Posté : 12 oct. 2009, 10:23
par jojolapine
Essaye simplement
pour voir?
Et puis pour faire plus propre tu peux quand même te le mettre dans une petite fonction
Re: cocher plusieurs checkbox
Posté : 12 oct. 2009, 10:38
par toony.m
[jojolapine]
Ca marche sous firefox mais sous IE...
Re: cocher plusieurs checkbox
Posté : 12 oct. 2009, 10:43
par jojolapine
Après recherche il apparait que IE attende un booléen pour la valeur de l'attribut checked...
Ou alors utilise
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
Re: cocher plusieurs checkbox
Posté : 12 oct. 2009, 10:59
par toony.m
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
Re: cocher plusieurs checkbox
Posté : 12 oct. 2009, 11:22
par jojolapine
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...)
Re: cocher plusieurs checkbox
Posté : 12 oct. 2009, 11:30
par toony.m
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 ?
Re: cocher plusieurs checkbox
Posté : 12 oct. 2009, 11:31
par jojolapine
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...
Re: cocher plusieurs checkbox
Posté : 12 oct. 2009, 11:44
par toony.m
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>
Re: cocher plusieurs checkbox
Posté : 12 oct. 2009, 13:17
par jojolapine
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
Re: cocher plusieurs checkbox
Posté : 12 oct. 2009, 14:35
par toony.m
Tout ça à cause de onclick....et ba
merci infiniment!!
Donc IE ne gère pas le OnChange ?