Définir nombre radio à cocher

**vik93** · 01/08/2013, 14h27

Bonjour à tous !

Aujourd'hui, je suis confronté à un problème particulier. En effet, j'ai une liste d'éléments avec des radio button (input type = radio).

C'est une liste qui comporte plus de 200 éléments avec des radio button, et moi je souhaiterai créer quelque chose qui permet de :

1.Définir le nombre de Radio à cocher (ex : 50)

2.Une fois la première tâche effectuée, on clique sur un bouton et les radio se cochent (côté utilisateur, sans rafraichissement de la page) (ex : les 50 premiers sont cochés).

J'ai cherché un peu partout sur le net, je n'ai rien trouvé...

En espérant avoir une aide ou une piste, ce serait génial pour mon projet !

En vous remerciant d'avance.

Edit : le sujet a été déplacé, donc je précise que c'est pour du PHP

**callo** · 01/08/2013, 14h55

Bonjour,
Cela fait un bail que je n'ai plus écrit du code php. Mais si tu as par exemple

Code php :

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
18
19
20
<?php
echo "<table border='0'>
  <tr>
	<td>N° ordre</td>
	<td>Entete 01</td>
	<td>Entete 02</td>
	<td>Entete 03</td>
	<td>Entete 04</td>
  </tr>";
for($i=0;$i<4;$i++){
echo " <tr>
	<td>$i</td>
	<td><input type='radio' name='monradio[$i]' value='biscuit'/></td>
	<td><input type='radio' name='monradio[$i]' value='bonbon' /></td>
	<td><input type='radio' name='monradio[$i]' value='yaourt' /></td>
	<td><input type='radio' name='monradio[$i]' value='bic' /></td>
  </tr>";
  }
echo " </table>";
?>

Tu peux sur clic de ton bouton utiliser javascript pour cocher automatiquement tes radio boutons:

Code :

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

1
2
3
4
5
6
<SCRIPT LANGUAGE="JavaScript">
for($i=0;$i<4;$i++){
{
 document.forms["nomdemonform"].monradio[i].checked = true;
}
</SCRIPT>

**vik93** · 01/08/2013, 15h08

Salut et merci pour ta réponse !

N'ayant jamais fait de javascript, je comprends quand même le C++.

Code :

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

1
2
3
4
5
6
<SCRIPT LANGUAGE="JavaScript">
for($i=0;$i<4;$i++){
{
 document.forms["nomdemonform"].monradio[i].checked = true;
}
</SCRIPT>

Donc je comprends bien, le 4 correspond au nombre de cases à cocher (ce qui est parfait si j'utilise une variable !).

Cependant, où se trouve ce fameux bouton ? l'as-tu inclus dans ton code ci dessus ? Je suppose qu'en javascript il doit y avoir une syntaxe particulière

**Matthieu2000** · 01/08/2013, 15h13

Code :

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

formulaire dynamique ajax

**vik93** · 01/08/2013, 15h24

J'ai cherché, mais je n'ai pas trouvé surtout que je ne connais pas trop javascript ajax

Mais l'exemple du dessus est très parlant ! Juste trouver comment créer ce bouton ensuite j'essaye de manipuler ça.

**callo** · 01/08/2013, 15h44

Bah! c'est tout simple. Dans ton formulaire, tu mets:

Code :

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

1
2
 
<input type="button" name="Cocher" value="Cliquez pour cocher" onclick="CocherMesRadio();" />

Puis en tu écris ta fonctions javascript comme suit:

Code :

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

1
2
3
4
5
6
7
8
9
 
<script type="text/javascript">
function CocherMesRadio() {
for($i=0;$i<4;$i++){
{
 document.forms["nomdemonform"].monradio[i].checked = true;
}
}
</script>

**JérémieL** · 01/08/2013, 15h47

Bonjour,

Tu veux cocher plusieurs boutons radio d'un même groupe en même temps ? Dans un groupe de boutons radio, un seul bouton radio est coché, et en cocher un, décoche tous les autres. Sinon, ce sont des checkboxes qu'il faut que tu utilises.

Pour répondre à ta dernière question, il faut que tu ajoutes un bouton dans ton code HTML. À la fin du chargement de la page, tu vas ajouter (en javascript) un handler d'événement "click" sur le bouton qui appellera la fonction de coche des n premières cases.

Par exemple :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
 
<script>
//<!--
 
function checkBoxes() {
 
  var nbCheckBoxes = 2;
  
  var allInputs = document.getElementsByTagName('input');
  for (i = 0; i < allInputs.length && i < nbCheckBoxes; i++) {
    if (allInputs[i].type == 'checkbox') {
      allInputs[i].checked = true;
    }
  }
}
 
window.onload = function() {
 
  document.getElementById("checkButton").addEventListener("click", checkBoxes, false);
};
 
//-->
</script>
 
 
</head>
 
<body>
  <form id="myForm" name="myForm">
    <button type="button" id="checkButton">Cocher les 2 premières cases</button>
    <input type="checkbox" value="value1" />
    <input type="checkbox" value="value2" />
    <input type="checkbox" value="value3" />
    <input type="checkbox" value="value4" />
    <input type="checkbox" value="value5" />
  </form>
</body>
</html>

EDIT : la méthode de Callo fonctionne aussi, personnellement je préfère juste séparer les appels au javascript et la structure HTML.

**vik93** · 01/08/2013, 16h38

Merci à vous ! Je ferai des tests, et vous tiendrai au courant !!!

**vik93** · 06/08/2013, 11h14

Juste une question, ton formulaire permet de cocher deux cases. Mais si ce nombre de case je souhaite le définir (par une liste déroulante par exemple, avec la possibilité de choisir un nombre entre 1 et 100), comment puis-je faire ?

Exemple :

Code html :

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

1
2
3
4
5
6
7
8
<select name="nombre">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="23">4 </option>
</select>
 
<button type="button" id="checkButton">

Il faut que je mette en relation le bouton avec la liste déroulante, comment puis-je faire ?
(Veuillez m'excuser d'avance si cette fonctionnalité vous parait simple, je ne suis pas un expert en javascript loin de la)

En vous remerciant d'avance.

**callo** · 07/08/2013, 13h01

Code html :

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

1
2
3
4
5
6
7
8
9
<select name="nombre" id="nombre">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4">4 </option>
<!.. ...............................  ..>
<option value="100">100</option>
 
</select>

Si tu veux, tu peux utiliser un boucle for pour créer dynamiquement les valeurs du select.

Code javascript :

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

1
2
3
4
5
6
7
8
9
 
<script type="text/javascript">
function checkBoxes() {
 var selectNumberItem = document.getElementById("nombre");
 var valeurNbreselectionne = selectNumberItem.options[selectNumberItem.selectedIndex].value;
 var nbCheckBoxes = valeurNbreselectionne;
 // .....
}
</script>

**vik93** · 08/08/2013, 12h35

Merci beaucoup Callo ça marche à merveille !!!

Par contre il y a un truc qui ne va pas, par exemple quand je clique une fois sur 4 par exemple (4 cases qui se cochent), et que je clique sur 2 après, les 4 restent cochés.

Faut-il que je fasse une autre boucle FOR en la plaçant tout au début en mettant Checked = false ?

Par contre faudra parcourir tous les input :

Code :

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

for (i = 0; i < allInputs.length; i++)

est-ce suffisant ?

Edit : Après test, ca fonctionne très bien !

**NoSmoking** · 08/08/2013, 16h08

Bonjour,
tu peux parcourir toute la liste est ne cocher que suivant le cas

Code :

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

1
2
3
4
5
  for (i = 0; i < allInputs.length; i++) {
    if (allInputs[i].type == 'checkbox') {
      allInputs[i].checked = i< nbCheckBoxes ? true :false;
    }
  }

**SpaceFrog** · 09/08/2013, 08h38

Code :

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

 allInputs[i].checked = (i< nbCheckBoxes);

typiquement pas besoin du ternaire

**Bovino** · 09/08/2013, 09h16

Code :

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

allInputs[i].checked = i< nbCheckBoxes;

Ni de parenthèses d'ailleurs.

**vik93** · 09/08/2013, 11h14

Oh merci cool ça fonctionne à merveille !!!

Maintenant que je l'ai essayé et testé sur une page vide, je vais donc l'inclure sur une application existante.

Cependant, j'ai une erreur particulière :

Uncaught TypeError: Cannot call method 'addEventListener' of null

Savez-vous à quoi correspond cette erreur ? Juste pour information, le script est bien situé entre les balises <head>, c'est l'outil de développement de Chrome qui me sort cette erreur...

Je vous remet mon script :

Code :

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
18
19
20
21
22
23
24
25
function checkBoxes() {
 var selectNumberItem = document.getElementById("nombre");
 var valeurNbreselectionne = selectNumberItem.options[selectNumberItem.selectedIndex].value;
 var nbCheckBoxes = valeurNbreselectionne;
 
 var allInputs = document.getElementsByTagName('input');
 
 for (i = 0; i < allInputs.length; i++) {
    if (allInputs[i].type == 'checkbox') {
      allInputs[i].checked = false;
    }
  }
 
 
  for (i = 0; i < allInputs.length && i < nbCheckBoxes; i++) {
    if (allInputs[i].type == 'checkbox') {
      allInputs[i].checked = true;
    }
  }
}
 
window.onload = function() {
 
  document.getElementById("checkButton").addEventListener("click", checkBoxes, false);
}

En vous remerciant d'avance.

Edit : L'erreur vient plus précisément du window.onload apparemment.

**NoSmoking** · 09/08/2013, 14h13

Pourquoi faire 2 boucles alors qu'une est suffisante ?

Il faut penser à ajouter un compteur de checkbox attendu que l'on récupère TOUS les <input>.

Code :

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

1
2
3
4
5
  for(i=0, k=0; i<allInputs.length; i++) {
    if (allInputs[i].type == 'checkbox'){
      allInputs[i].checked = k++< nbCheckBoxes;
    }
  }

( voilà en moins de 140 caractères )

Pour le soucis de addEventListener c'est surement que tu utilises une version IE <9.

Si tu n'a rien d'autre à mettre sur le bouton, tu peux mettre simplement

Code :

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

1
2
3
window.onload = function() {
  document.getElementById("checkButton").onclick = checkBoxes;
}

**vik93** · 09/08/2013, 14h50

Salut et merci pour ta réponse.

Ca ne marche toujours pas, il y a une autre erreur :

Uncaught TypeError: Cannot set property 'onclick' of null

Pourtant je n'utilise pas du tout IE, j'utilise firefox et chrome parallèlement

Une idée pour cette erreur aussi ?

**NoSmoking** · 09/08/2013, 14h59

Uncaught TypeError: Cannot set property 'onclick' of null

tu n'as pas dans ton document HTML d'élément qui possède comme ID checkButton

**vik93** · 09/08/2013, 15h16

Si je l'ai dans mon Button justement

http://[IMG]http://imageshack.us/pho....jpg[/IMG]

Nous voyons bien mon javascript (PJ 1)

http://imageshack.us/photo/my-images/838/epj9.jpg

Ici nous voyons bien mon button avec l'ID bien renseigné. On voit également la liste déroulante en dessous, ainsi que le checkbox juste après (PJ 2)

http://imageshack.us/photo/my-images/41/cju4.jpg/

Et là nous avons l'erreur ! (PJ 3)

Je pense ne rien avoir oublié, je trouve très étrange que ça ne fonctionne pas

edit : Les images ne veulent pas s'afficher (balise IMG), j'ai mit le lien directement

edit 2 : utilisation des PJ (pratique !)