Cliquer sur un checkbox pour décocher les autres

**bigs3232** · 11/07/2017, 23h50

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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()">'

**andry.aime** · 12/07/2017, 06h58

Bonjour,

Pourquoi ne pas simplement utiliser des boutons radio?

A+.

**SpaceFrog** · 12/07/2017, 09h30

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.

**bigs3232** · 12/07/2017, 09h54

merci pour vos réponses.effectivement c'est intéressant.
mais intellectuellement c'est possible de faire avec la checbox?

**SpaceFrog** · 12/07/2017, 10h00

oui en affectant un script sur le onclick des checkboxes qui testera le checked et bouclera sur les autres pour les décocher ...

**andry.aime** · 12/07/2017, 10h18

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?

**eleydet** · 12/07/2017, 14h49

Bonjour,

Ci-dessous, un exemple de solution:

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
<!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>

**NoSmoking** · 12/07/2017, 19h27

Bonjour,

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.

**eleydet** · 13/07/2017, 08h40

Bonjour,

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".

**SpaceFrog** · 13/07/2017, 09h04

En plus vu que tu as

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 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 ...

**bigs3232** · 13/07/2017, 14h28

en fait je maitrise bien les checkbox mais les boutons radio j'ai jamais vraiment fait c'est pour çà

**bigs3232** · 13/07/2017, 15h04

je ne sais si les boutons radio marchent aussi avec onchange="this.form.submit()

**SpaceFrog** · 13/07/2017, 15h21

chiche essaye !

**bigs3232** · 13/07/2017, 15h48

ok je vais chercher un peu comment faire

**NoSmoking** · 13/07/2017, 16h37

@eleydet :

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.

**bigs3232** · 13/07/2017, 18h41

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>';

**dominos** · 14/07/2017, 11h52

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**bigs3232** · 14/07/2017, 11h59

c'est gentil dominos.ton code sert à decocher plusieurs checkbox.ca ne réponds pas trop à mon problème avec mes box radio

**eleydet** · 15/07/2017, 08h37

Bonjour,

bigs3232 a écrit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

echo '<form method="post">'

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

echo '<form action="resultat.php" method="post">'

**bigs3232** · 15/07/2017, 12h26

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

Cliquer sur un checkbox pour décocher les autres

JavaScript

Discussions similaires

Partager

Partager