Bonjour

je dois faire des modifications dans un code qui n'est pas le mien et Prototype est utilisé. Je n'ai jamais touché à Prototype donc c'est pour ça que je viens vous demander de l'aide parce que là je patauge

Voici mon problème (je simplifie pour que vous compreniez mieux ^^) :
> j'ai un tableau avec 5 colonnes : A, B, C, D et E
> j'ai une première ligne principale : 1.
> je peux déplier mon tableau et obtenir sous la ligne 1, 5 autres lignes : 2, 3, 4, 5 et 6.

Mon tableau n'est composé que de checkboxes donc par ligne j'ai : 5 checkboxes (une pour chaque colonne).

Le truc à faire : si je clique sur une checkbox de la ligne 1, toutes les checkboxes de la colonne correspondante devront se cocher (que le tableau soit déplié ou non).

Mon problème : ben pour la première colonne (A), ça fonctionne bien. Mais il ne se passe strictement rien sur mes autres colonnes

Mon code html :
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
26
27
28
29
 
<div>
<!-- Ligne principale forcément visible -->
	<div class="x-sub-block-header">
		<label class="row-medium-label"><img src="clear.gif" alt="+" class="x-sub-block-button" />...</label>
		<span class="form-column"><input type="checkbox" name="tableau[1][A]" class="x-autocheck-A checkbox-input" value="1" /></span>
		<span class="form-column"><input type="checkbox" name="tableau[1][B]" class="x-autocheck-B checkbox-input" value="1" /></span>
		<span class="form-column"><input type="checkbox" name="tableau[1][C]" class="x-autocheck-C checkbox-input" value="1" /></span>
		<span class="form-column"><input type="checkbox" name="tableau[1][D]" class="x-autocheck-D checkbox-input" value="1" /></span>
		...
	</div>
<!-- Lignes non visibles au départ dépliables -->
	<div class="x-sub-block">
		<label class="row-medium-label secondary-label row-checker-label">...</label>
		<span class="form-column"><input type="checkbox" name="tableau[2][A]" class="validate-norule checkbox-input" value="1" /></span>
		<span class="form-column"><input type="checkbox" name="tableau[2][B]" class="validate-norule checkbox-input" value="1" /></span>
		<span class="form-column"><input type="checkbox" name="tableau[2][C]" class="validate-norule checkbox-input" value="1" /></span>
		<span class="form-column"><input type="checkbox" name="tableau[2][D]" class="validate-norule checkbox-input" value="1" /></span>
		...
 
		<br />
 
		<label class="row-medium-label secondary-label row-checker-label">...</label>
		<span class="form-column"><input type="checkbox" name="tableau[3][A]" class="validate-norule checkbox-input" value="1" /></span>
		<span class="form-column"><input type="checkbox" name="tableau[3][B]" class="validate-norule checkbox-input" value="1" /></span>
		<span class="form-column"><input type="checkbox" name="tableau[3][C]" class="validate-norule checkbox-input" value="1" /></span>
		<span class="form-column"><input type="checkbox" name="tableau[3][D]" class="validate-norule checkbox-input" value="1" /></span>
			...
					<br />
Et mon js (je n'en mets qu'une partie car il me semble que c'est le code principal mais à voir s'il manque des choses ...) :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
 
form.select('.row-checker-label').each(Social.labelRowChecker.bindLabel);
form.select('.x-sub-block-header').each(Social.togglableBlocks.bindHeader);
 
		if (form.hasClassName('...')) {
			$A(['A', 'B', 'C', 'D', 'E']).each(function (key) {
				var reg = new RegExp('\\[' + key + '\\]$');
				form.select('.x-autocheck-' + key).each(function (elm) {
					Social.massChecker.bindElement(elm, reg, elm.up('div').next());
				});
			});
		}
et :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
Social.massChecker = {
	bindElement: function (element, pattern, container) {
		var checkboxes = container.select('input[type="checkbox"]').findAll(function (item) {
			return item.name.match(pattern);
		});
 
 
		$(element).observe('click', function() {
			checkboxes.each(function (item) {
				item.checked = element.checked;
			});
		});
	}
};
 
Social.labelRowChecker = {
	bindLabel: function (label) {
		var checkboxes = Social.labelRowChecker.getCheckboxesAfterLabel(label);
 
		label.observe('click', function () {
			var val = null;
 
			checkboxes.each(function (cb) {
				if (val === null) {
					val = !cb.checked;
				}
 
				cb.checked = val;
				if (cb._onchange) {
					cb._onchange();
				}
			});
		});
	},
	getCheckboxesAfterLabel: function (label) {
		var checkboxes = [],
			cur = label.next();
 
		while (cur && cur.tagName.toLowerCase() !== 'label') {
			if (cur.match('input[type=checkbox]')) {
				checkboxes.push(cur);
			} else {
				cur.select('input[type=checkbox]').each(function (i) {
					checkboxes.push(i);
				});
			}
 
			cur = cur.next();
		}
 
		return checkboxes;
	}
};
 
Social.togglableBlocks = {
	bindHeader: function (header) {
		var block = header.next('.x-sub-block'),
			button = header.select('.x-sub-block-button')[0],
			checkboxes = header.select('input[type=checkbox]'),
			isChecked = function (e) {
				return e.checked;
			},
			onCheckboxChange = function () {
				if (checkboxes.find(isChecked)) {
					block.show();
				} else {
					block.hide();
				}
			};
 
		if (block) {
			block.hide();
			button.observe('click', function (event) {
				event.stop();
				header.toggleClassName('x-block-deployed');
				block.toggle();
			});
 
		}
	}
};
Donc voilà, en fait mon each(function(key) ...) s'arrête à ma première clé "A".

Que manque-t-il à mon code ?

Je vous remercie !