Définir nombre radio à cocher

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

Voilà j'ai utilisé les PJ lol

**NoSmoking** · 09/08/2013, 15h42

essayes de faire tourner ce code

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

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

Je viens de le test sur une page blanche, ça fonctionne très bien

**NoSmoking** · 09/08/2013, 16h00

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

Code html :

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

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

**vik93** · 09/08/2013, 16h08

C'est quoi cette méthode de inline ?

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 ?

**NoSmoking** · 09/08/2013, 17h21

Quelle est la méthode inline ?

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

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

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

**SylvainPV** · 10/08/2013, 02h31

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

Code :

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

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

**vik93** · 12/08/2013, 10h02

Bonjour,

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

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

**vik93** · 23/08/2013, 11h25

Bonjour à tous !

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

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

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.

**SylvainPV** · 24/08/2013, 12h59

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.

**vik93** · 26/08/2013, 10h04

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

Définir nombre radio à cocher

JavaScript

Discussions similaires

Partager

Partager