Définir nombre radio à cocher

Version imprimable

01/08/2013, 14h27
vik93

Définir nombre radio à cocher

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

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

Code:

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:

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

01/08/2013, 15h08
vik93
Salut et merci pour ta réponse !

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

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
01/08/2013, 15h13
Matthieu2000

Code:

formulaire dynamique ajax

:recherch:
01/08/2013, 15h24
vik93

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.

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

Code:

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

Puis en tu écris ta fonctions javascript comme suit:

Code:

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>

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:

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

01/08/2013, 16h38
vik93

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

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:

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.

Code:

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:

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>

08/08/2013, 12h35
vik93

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:

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

est-ce suffisant ?

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

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

Code:

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

09/08/2013, 08h38
SpaceFrog

Code:

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

typiquement pas besoin du ternaire ;)
09/08/2013, 09h16
Bovino

Code:

allInputs[i].checked = i< nbCheckBoxes;

Ni de parenthèses d'ailleurs. :mrgreen:

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 :

Citation:

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:

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.

09/08/2013, 14h13
NoSmoking
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:

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:

1 2 3 window.onload = function() { document.getElementById("checkButton").onclick = checkBoxes; }
09/08/2013, 14h50
vik93

Salut et merci pour ta réponse.

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

Citation:

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 ?
09/08/2013, 14h59
NoSmoking

Citation:

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
09/08/2013, 15h16
vik93

3 pièce(s) jointe(s)

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 !)
09/08/2013, 15h20
Bovino

Citation:

Je pense ne rien avoir oublié

Si... les images ! :aie:

Tu ferais mieux d'utiliser les pièces jointes d'ailleurs (l'icône en forme de trombone dans l'éditeur)...
09/08/2013, 15h26
vik93

Voilà j'ai utilisé les PJ lol

:koi:
essayes de faire tourner ce code

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
41
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[...]</title>
<script>
function checkBoxes() {
  var selectNumberItem = document.getElementById("nombre");
  var valeurNbreselectionne = selectNumberItem.value;
  var nbCheckBoxes = valeurNbreselectionne;
  var allInputs = document.getElementsByTagName('input');
  for(i = 0, k=0; i < allInputs.length; i++) {
    if (allInputs[i].type == 'checkbox'){
      allInputs[i].checked = k++< nbCheckBoxes;
    }
  }
}
window.onload = function() {
  document.getElementById("checkButton").onclick = checkBoxes;
}
</script>
</head>
<body>
  <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>
  <button type="button" id="checkButton">Cocher</button>
  <form id="myForm" name="myForm">
    <input type="text" value="input parasite">
    <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>

09/08/2013, 15h49
vik93

Je viens de le test sur une page blanche, ça fonctionne très bien :?
09/08/2013, 16h00
NoSmoking

Versifie qu'il n'y a pas de conflit avec EXTJS que tu utilises visiblement, sinon, et se serait dommage, utilise la bonne vielle méthode du inline :calim2:

Code:

<button type="button" id="checkButton" onclick="checkBoxes()">Select</button>
09/08/2013, 16h08
vik93

C'est quoi cette méthode de inline ? 8O

En fait j'utilise une application existante (GLPI). Je suis en train d'apporter des modifications dans le but de l'améliorer. Ce javascript devrait fonctionner, c'est très bizarre....

Extjs je ne connais pas du tout, je ne sais pas comment faire pour connaitre les conflits....

Quelle est la méthode inline ?
09/08/2013, 17h21
NoSmoking

Citation:

Quelle est la méthode inline ?

c'est mettre le code javascript directement dans la balise comme indiqué dans le dernier exemple

Citation:

<button type="button" id="checkButton" onclick="checkBoxes()">Select</button>

Citation:

Extjs je ne connais pas du tout, je ne sais pas comment faire pour connaitre les conflits....

pourtant les fichier JS sont insérer dans ton code, voir ta 1st capture line 16 et 17..

Pour info, document.querySelectorAll est maintenant largement supporté (même par IE8)

Code:

1
2
3
4
5
6
7
function checkBoxes() {
  var nbToCheck = document.getElementById("nombre").value;
  var boxes = document.querySelectorAll('input[type=checkbox]');
  for(i = 0; i < Math.min(boxes.length, nbToCheck ); i++) {
     boxes[i].checked = true;
  }
}

12/08/2013, 10h02
vik93

Bonjour,

J'ai tout essayé, mais j'ai toujours cette erreur :

Citation:

Uncaught TypeError: 'Cannot call method 'addEventListener' of null

Comme je l'ai dit plus haut, je récupère une application existante (qui est déjà implémentée), où j'apporte des modifications (notamment le JavaScript ici pour mon cas).

Je vais essayer d'étudier ExtJS (en espérant que ça ne me prenne pas beaucoup de temps :s).

Bonjour à tous !

Donc après une vingtaine de jours, toujours le même problème.

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
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);
}

Je pense qu'il ne comprends pas "window.onload = function()".

Est ce possible de faire en sorte de le mettre dans le fonction checkboxes du dessus ? De façon à n'avoir qu'une seule fonction JS ? (j'espère avoir été clair).

En vous remerciant d'avance.

24/08/2013, 12h59
SylvainPV

Il n'y a aucune raison que window.onload ne fonctionne pas. Si l'erreur est toujours la même, alors ça montre clairement que l'élément avec un ID checkButton n'est pas trouvé dans le document. La première chose à regarder est donc le HTML, qu'ici nous n'avons pas.
26/08/2013, 10h04
vik93

Bonjour, et merci pour ta réponse !

En fait le code est dans les images juste au dessus (1ere page).

C'est le code du code source, et l'id est bien présent....

Je ne comprends pas ce qui se passe...

En vous remerciant d'avance

Fuseau horaire GMT +2. Il est actuellement 08h03.