Cliquer sur un checkbox pour décocher les autres

Version imprimable

j'ai un 3 checkbox avec la même classe et j'aimerais que quand l'utilisateur clique sur l'un des boxes ,les autres boxes doivent être décochés.
le problème arrive quand il y a plusieurs itérations
j'espère être assez clair et bien sur merci pour votre aide
je voudrais un code en jquery si possible
Code:

1 2 3 '<input type="checkbox" title="zz" class="box" onchange="this.form.submit()">' '<input type="checkbox" title="zz1" class="box" onchange="this.form.submit()">' '<input type="checkbox" title="zz2" class="box" onchange="this.form.submit()">'

12/07/2017, 06h58
andry.aime

Bonjour,

Pourquoi ne pas simplement utiliser des boutons radio?

A+.
12/07/2017, 09h30
SpaceFrog

j'allais le dire... c'est curieux cette tendance àvouloir aller à l'encontre de l'ergonomie standard !

Les bouton radios ont cette fonctionnalité de base que lorsqu'ils portent le même name ils fonctionnent en groupe dans lequel une seul peut être coché à la fois.
12/07/2017, 09h54
bigs3232

merci pour vos réponses.effectivement c'est intéressant.
mais intellectuellement c'est possible de faire avec la checbox?
12/07/2017, 10h00
SpaceFrog

oui en affectant un script sur le onclick des checkboxes qui testera le checked et bouclera sur les autres pour les décocher ...
12/07/2017, 10h18
andry.aime

Citation:

Envoyé par SpaceFrog

j'allais le dire... c'est curieux cette tendance àvouloir aller à l'encontre de l'ergonomie standard !

Avec les mariages pour tous, qu'est ce qui t'étonne?
:pastaper:

Bonjour,

Ci-dessous, un exemple de solution:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function decocher(a,b) {
        document.getElementById(a).checked=false;
        document.getElementById(b).checked=false;
      }
    </script>
  </head>
  <body>
    <input type='checkbox' id='id1' onclick='decocher("id2","id3")'>Cliquer<br>
    <input type='checkbox' id='id2' onclick='decocher("id1","id3")'>Cliquer<br>
    <input type='checkbox' id='id3' onclick='decocher("id1","id2")'>Cliquer
  </body>
</html>

12/07/2017, 19h27
NoSmoking

Bonjour,

Citation:

Ci-dessous, un exemple de solution :

Pas pour moi qui partage l'avis général on utilise des type="radio" ou si l'apparence ne plait pas on passe par de la customisation d'éléments neutres, mais détourner des éléments sémantiques ne me paraît vraiment pas opportun.
13/07/2017, 08h40
eleydet

Bonjour,

Citation:

NoSmoking à écrit : Pas pour moi qui partage l'avis général on utilise des type="radio"...

Oui, bien sûr. C'est vrai en général.

Mais il y a le cas particulier d'un ensemble de cases à cocher où certaines combinaisons sont interdites. Par exemple, on peut cocher les trois premières cases mais pas la dernière, ou bien la première case et les deux dernières mais pas la deuxième.

Dans ce cas particulier, il faut gérer les cases qui seront cochées, qu'elles soient de type "radio" ou de type "checkbox".
13/07/2017, 09h04
SpaceFrog

En plus vu que tu as

Code:

onchange="this.form.submit()

la page se recharge dès qu'une box est cochée ou décochée ...
donc peu importe l'état des autres ...
13/07/2017, 14h28
bigs3232

en fait je maitrise bien les checkbox mais les boutons radio j'ai jamais vraiment fait c'est pour çà
13/07/2017, 15h04
bigs3232

je ne sais si les boutons radio marchent aussi avec onchange="this.form.submit()
13/07/2017, 15h21
SpaceFrog

chiche essaye !
13/07/2017, 15h48
bigs3232

ok je vais chercher un peu comment faire
13/07/2017, 16h37
NoSmoking
@eleydet :

Citation:

Mais il y a le cas particulier d'un ensemble de cases à cocher où certaines combinaisons sont interdites.

cela ne change rien, dans un groupe de choix si
- il peut y avoir des combinaisons on utilise des <input type="checkbox"> et on gère les combinaisons en javascript ;
- le choix doit être unique on utilise des <input type="radio">, il n'y a pas de gestion à faire.
@bigs3232 :
soumettre à chaque changement peut être un peu lourd en cas d'indécision du visiteur.

j'ai fait un code comme celà.mais j'aimerais que quand je clique sur une des radios et je soumet .cette radio doit être coché
mais çà ne marche pas

Code:

1
2
3
4
5
6
7
8
9
 
if (isset($_POST[ 'radio_rep']) && $_POST[ 'radio_rep']=='aff_fich_import_ch' ) $checked=' checked="checked"';
if (isset($_POST[ 'radio_rep']) && $_POST[ 'radio_rep']=='aff_fich_dern_import' ) $checked=' checked="checked"';
echo '<form method="post">'
.'=>ned_ajout.csv   <input type="radio" name="radio_rep" value="aff_fich_import_ch"'.$checked.'>'
.'|dern import* ned_aj_img.csv  <input type="radio" name="radio_rep" value="aff_fich_dern_import"'.$checked.'>'
.'enr 2pdtmp =>'.'ned_ajout_img_h.csv<input type="radio" name="radio_rep" value="enr_fich_img"  />'
.'<input  type="submit" name="aff_valide" value="aff_valide">'			;	
echo '</form>';

Bonjour,

Code:

1
2
3
4
5
6
7
8
function Unchecked(id) 
{
	collection = document.querySelectorAll("[id^='"+id+"']");
	co = collection.length;
	for (i = 0; i < co; i++) { 
		collection[i].checked = '';
	}
}

Code:

1
2
3
4
Test:
<input id="opt1" type="checkbox" onchange="Unchecked('opt');">
<input id="opt2" type="checkbox">
<input id="opt3" type="checkbox">

Bonne journée

14/07/2017, 11h59
bigs3232

c'est gentil dominos.ton code sert à decocher plusieurs checkbox.ca ne réponds pas trop à mon problème avec mes box radio
15/07/2017, 08h37
eleydet

Bonjour,

bigs3232 a écrit :

Code:

echo '<form method="post">'

Ce code est incomplet? Il manque la page à appeler, comme ci-dessous par exemple?

Code:

echo '<form action="resultat.php" method="post">'
15/07/2017, 12h26
bigs3232

les forms du début et fin sont bien présent dans mon code

en fait c'est tout bete il suffit de différencier la variable $checked exemple mettre $checked1 et ca marche
par contre si j'en ai plusieurs variables $checked je voudrais faire une belle boucle pour simplifier le code
une idée?

Code:

1
2
3
4
5
6
7
8
if (isset($_POST[ 'radio_rep']) && $_POST[ 'radio_rep']=='aff_fich_import_ch' ) $checked=' checked="checked"';
if (isset($_POST[ 'radio_rep']) && $_POST[ 'radio_rep']=='aff_fich_dern_import' ) $checked1=' checked="checked"';
echo '<form method="post">'
.'=>ned_ajout.csv   <input type="radio" name="radio_rep" value="aff_fich_import_ch"'.$checked.'>'
.'|dern import* ned_aj_img.csv  <input type="radio" name="radio_rep" value="aff_fich_dern_import"'.$checked1.'>'
.'enr 2pdtmp =>'.'ned_ajout_img_h.csv<input type="radio" name="radio_rep" value="enr_fich_img"  />'
.'<input  type="submit" name="aff_valide" value="aff_valide">'			;	
echo '</form>';