décocher une checkbox en cochant une autre checkbox

Version imprimable

Bonjour,
Je poursuis mes pérégrinations dans l'apprentissage du javascript, et il se trouve que je viens de trouver une petite fonction très exotique dont le résultat est tout aussi ironique.

Le but initial est simple :
J'ai 5 checkbox.
Une est cochée par défaut.
Si jamais, ô grand jamais, le visiteur clique une des 4 autres, celle qui est cochée par défaut se décoche d'un air majestueux, l'air de dire "si c'est comme ça, je me décoche".

J'ai trouvé le code suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <script type="text/javascript"> function ta() { for (i=0; i<formu.length; i++) { mesbox = formu.elements[i]; mesbox.checked = formu.tousaucuns.checked; } } </script </head> <body> <form action="#" method="post" name="formu"> <input type="checkbox" name="tousaucuns" value="tous/aucuns" onclick="ta();"> tous/aucuns<br> <input type="checkbox" name="check1" value="1"> 1<br> <input type="checkbox" name="check2" value="2"> 2<br> <input type="checkbox" name="check3" value="1"> 3<br> <input type="checkbox" name="check4" value="2"> 4<br> <input type="checkbox" name="check5" value="1"> 5<br> </form>
Mais ce code coche ou décoche tout ou rien, sans aucun compromis ni discussions, ce qui est pour le moins irritant vous le reconnaîtrez.

Donc, pendant que je lis un PDF sur javascript trouvé sur développez, je me suis dit que si un magicien du web passait par là il pourrait faire apparaitre cette fonction magique qui me rendra aussi surement riche que Mr Gates.

Merci d'avance

22/11/2005, 12h23
siddh

ben met des radios plutot, c est le comportement des radios de faire ca si elles ont le meme name.

des check c est fais pour offrir un choix multiple alors que les radios c est un choix unique
22/11/2005, 12h30
psychoBob

Merci pour ta réponse siddh

En fait je veux des checkbox pour effectivement faire un choix multiple.

Mais comme je l'ai dit, je cherche le code pour en avoir 5 dont une cochée par défaut, et si l'on coche une (ou plus) des 4 autres, celle cochée par défaut se décoche.

C'est tout mais c'est beaucoup pour un misérable débutant.
Ca ne fait que 2 jours que je survole javascript et mon projet est pour la fin du mois (c'est essentiellement du php/mysql, je ne pensais pas avoir besoin de javascript, mais je m'apperçois que son utilisation peut parfois simplifier les choses).
22/11/2005, 12h35
siddh

mwé le truc c est que un code comme ca t empechera d avoir une selection multiple puisque c est un code qui decochera les autres quand tu la coche[/code]

Tien, voici un p'tit code qui pourrait t'aider...

Code:

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
<html>
<head>
    <script language="javascript">
        function ta(){
            var checkAll = document.getElementById('tousaucuns');
            var arrCheckGroup = document.getElementsByName('Group1');
            for(iLoop=0;iLoop<arrCheckGroup.length;iLoop++)
                arrCheckGroup[iLoop].checked = checkAll.checked;
        }
        function checkAll(obj){
            var checkAll = document.getElementById('tousaucuns');
 
            if(checkAll.checked == true && obj.checked==false)
                checkAll.checked = false;
            else if(obj.checked==true){
                var arrCheckGroup = document.getElementsByName('Group1');
                var allChecked = true;
 
                for(iLoop=0;iLoop<arrCheckGroup.length;iLoop++)
                    if(arrCheckGroup[iLoop].checked == false){
                        allChecked = false;
                        break;
                    }
                checkAll.checked = allChecked;
            }
        }
    </script>
</head>
<body>
    <form> 
        <input type="checkbox" name="tousaucuns" value="tous/aucuns" onclick="ta();" ID="tousaucuns"> tous/aucuns<br> 
        <input type="checkbox" name="Group1" value="1" onclick="checkAll(this);"> 1<br> 
        <input type="checkbox" name="Group1" value="2" onclick="checkAll(this);"> 2<br> 
        <input type="checkbox" name="Group1" value="1" onclick="checkAll(this);"> 3<br> 
        <input type="checkbox" name="Group1" value="2" onclick="checkAll(this);"> 4<br> 
        <input type="checkbox" name="Group1" value="1" onclick="checkAll(this);"> 5<br> 
    </form> 
 
</body>
</html>

Bonne chance

22/11/2005, 12h39
psychoBob

Je n'ai pas du bien m'expliquer.

J'ai 4 catégorie pour effectuer la recherche et 5 checbox.

Si la première checkbox est cochée, cela signifie : on recherche dans les 4 catégories.

Si une ou plusieurs autres checkbox sont cochées, fatalement la première se décoche puisque l'on ne va pas chercher dans une ou plusieurs catégorie + toute à la fois, c'est absurde.
22/11/2005, 12h42
psychoBob

ouah, j'étais content en voyant le code de Capitaine Flamme mais il s'avère qu'il produit la même chose que le code que j'ai placé dans le premier post...

Enfin c'est l'intention qui compte hein :wink:

ok :)

Code:

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
<script type="text/javascript"> 
function ta() { 
  for (i=0; i<formu.length; i++) { 
 mesbox = formu.elements[i]; 
 mesbox.checked = formu.tousaucuns.checked; 
 } 
} 
function decoche(){
var lacheck = document.getElementById("defcheck");
 if(lacheck.checked)
      lacheck.checked = false; 
 
}
</script 
</head> 
 
<body> 
<form action="#" method="post" name="formu"> 
 <input type="checkbox" name="tousaucuns" id="defcheck" value="tous/aucuns" checked="checked" onclick="ta()"> tous/aucuns<br> 
 <input type="checkbox" name="check1" value="1" onclick="decoche()"> 1<br> 
 <input type="checkbox" name="check2" value="2" onclick="decoche()"> 2<br> 
 <input type="checkbox" name="check3" value="1" onclick="decoche()"> 3<br> 
 <input type="checkbox" name="check4" value="2" onclick="decoche()"> 4<br> 
 <input type="checkbox" name="check5" value="1" onclick="decoche()"> 5<br> 
 
</form>

22/11/2005, 12h45
Capt. Flame

heee... C'Est quoi qui se passe quand tu places mon code?
22/11/2005, 12h45
siddh

j ai edité pardon ^^
22/11/2005, 12h45
Capt. Flame

Bâ... Je comprend pas ce que tu veux faire!!!
22/11/2005, 12h46
psychoBob

Super, ça fonctionne merci Siddh !

Par contre en l'utilisant je me rend compte d'un problème.
Une fois que l'utilisateur à coché une ou plusieurs cases, la première se décoche, c'est bon.

Maintenant ce qui serait très bien, ce serait que s'il recoche la première, celle(s) qu'il a coché(s) se décoche(nt).

Parce que s'il redécide de faire la recherche dans toute les catégories autant cliquer la checkbox initiale plutot que de décocher celles déjà cochée...
22/11/2005, 12h48
siddh

regarde, j ai edité le code, je sais pas quelle version tu as
22/11/2005, 12h48
Capt. Flame

Ok, tu veux garder la sélection de l'utilisateur... Mais, c'est un commentaire, tu trouves pas illogique d'avoir un check "Tous" qui est coché et de ne pas avoir toutes les checks associés cochés?

C'est vraiment mon opinion mais il me semble que ça fait pas très intuitif...
22/11/2005, 12h50
siddh

Citation:

Envoyé par Capt. Flame

document.getElementsByName

c'est pas standard ca non ?
22/11/2005, 12h51
siddh

oué c est vrai que j ai mis coché par defaut sans cocher les autres :oops:

faut enlever le checked="checked" ou le rajouter sur les autres :D
22/11/2005, 12h52
Capt. Flame

Oui...
http://www.quirksmode.org/dom/w3c_core.html
22/11/2005, 12h52
Capt. Flame

Et malgré ce qu'ils disent, c'est fonctionnel sous IE
22/11/2005, 12h59
psychoBob

Non je trouve que c'est bien, simplement si on recoche le checked "toutes les catégories" il faut que les checked cochées se décochent.

C'est soit la case "toute".
Soit une ou plusieurs cases précises.

Imaginez qu'il y a 50 checbox qu'est ce qui se passe ?
j'ai 50 cases cochées par défaut (douteux déjà), je décoche la première pour les décocher toutes, puis je recoche les bonnes : 1 clics plus les clics pour choisir.
Je veux maintenant rechercher dans toutes les catégories, et je reclique sur la checkbox "toutes les catégories" et hop elles se recochent toute.

Je trouve plus simple d'avoir une case qui dit "toutes les catégories".
Si on veut une ou plusieurs catégories ont clique la ou les checbox (ce qui décoche la case "toutes les catégories") : on économise un clique pour tout décocher.

Si ensuite on veut rechercher dans toutes les catégories on clique la case "toutes les catégories" ce qui décochent celle(s) cochée(s).
Il est inutile qu'elles soient toutes cochées pour dire que l'on va rechercher dans toutes les catégories, puisque de fait c'est déjà toutes les catégories qui sont sélectionnées en une seule case.
22/11/2005, 13h01
siddh

bha apres c est ton appli tu la gères comme tu veux ;)

penses a mettre :resolu: si ca te va
22/11/2005, 13h02
Capt. Flame

C'est plein de sens...
:)
22/11/2005, 13h08
Capt. Flame

Citation:

bha apres c est ton appli tu la gères comme tu veux

Plein de sagesse!!! :wink:
22/11/2005, 13h09
psychoBob

Bien c'est à dire que ça ne va pas en fait :roll:

Si comme dit Siddh j'enlève le checked ou que je le rajoute aux autres,
nonobstant le fait que les checkbos sont toutes cochées ce que je trouve inesthétique (mais bon si le code est plus simple..), si jamais le gars recoche la case toutes catégories les autres cases ne se décochent pas toutes, ou ne se cochent pas toutes (selon la solution choisie).

En fait avec ce code cela revient à dire "décochez les catégories qui vous ne souhaitez pas". Je trouve plus simple de dire "cochez celles que vous voulez", et puis de toutes façons ça ne peut pas fonctionner comme ça à cause du problème si le gars recoche la case "toutes les catégories".

Donc ça ne va pas en fait là.

Code:

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
<script type="text/javascript"> 
function ta(leform) { 
  var tous = document.getElementById("defcheck").checked;
  var inputs = leform.getElementsByTagName("input")
  for (i=0; i<inputs.length; i++) { 
      if(inputs[i].type == "checkbox" && inputs[i].id != "defcheck")
         if(tous)
            inputs[i].checked = false; 
 } 
} 
function decoche(){ 
var lacheck = document.getElementById("defcheck"); 
 if(lacheck.checked) 
      lacheck.checked = false; 
 
} 
</script 
</head> 
 
<body> 
<form action="#" method="post" name="formu"> 
 <input type="checkbox" name="tousaucuns" id="defcheck" value="tous/aucuns" checked="checked" onclick="ta(this.parentNode)"> tous/aucuns<br> 
 <input type="checkbox" name="check1" value="1" onclick="decoche()"> 1<br> 
 <input type="checkbox" name="check2" value="2" onclick="decoche()"> 2<br> 
 <input type="checkbox" name="check3" value="1" onclick="decoche()"> 3<br> 
 <input type="checkbox" name="check4" value="2" onclick="decoche()"> 4<br> 
 <input type="checkbox" name="check5" value="1" onclick="decoche()"> 5<br> 
 
</form>

essayes ca,
si t as un decalage de comportement, essayes de mettre

Code:

onmousedown=ta(this.parentNode)

22/11/2005, 13h14
psychoBob

OUAH LE CODE DE REVE !!

Merci Siddh ( et Capitaine Flamme aussi :wink: )

Bon à l'occasion je ferais de la pub pour Développez, en deux jours on m'a solutionné deux problèmes en moins de deux heure :D

Je ne met pas [ résolu ] tout de suite, je vais étudier un peu ce bout de code, j'aurais peut être des questions à poser.
22/11/2005, 15h48
denisC

Citation:

Envoyé par psychoBob

Bon à l'occasion je ferais de la pub pour Développez, en deux jours on m'a solutionné deux problèmes en moins de deux heure :D

Alors ça, c'est ce que j'appelle une très bonne idée :)

Toujours désireux d'aider les gens qui veulent aider DVP, je me permet de t'indiquer ce sujet:
http://www.developpez.net/forums/viewtopic.php?t=316675

:merci: