[prototype]Ajouter un évenement à tous les checkbox

[franculo_caoulene]

Salut,

J'essaie d'utiliser le framework prototype 1.5 pour ajouter un évènement click à tous les checkbox de mon formulaire, si possible sans faire de boucle. Sinon je ne vois vraiment pas l'intérêt de prototype!

Malheureusement la seule chose que j'ai réussi à faire c'est ajouter un évènement à un élément précise grâce à son id. Ce qui implique que si je souhaite l'ajouter à tous les checkbox je dois faire une boucle.

Ce qui fonctionne:

Code :

1
2
3
Event.observe(document.getElementById('10DernieresBP2'), 'click', function(event) {
    alert("coucou");
});

Ce qui ne fonctionne pas:

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
//ne génère pas d'erreur mais aucune alerte n'apparaît
Event.observe(document.getElementsByTagName('10DernieresBP2'), 'click', function(event) {
    alert("coucou");
});
 
//retourne "element has no properties"
Event.observe('input', 'click', function(event) {
    alert("coucou");
});
 
//retourne "element has no properties"
Event.observe('input[type="checkbox"]', 'click', function(event) {
    alert("coucou");
});
 
//retourne "$("input[type=\"checkbox\"]") has no properties" is not a function
$$('input[type="checkbox"]').observe('click', function(event) {
    alert("coucou");
});
 
//retourne "$$("input[type=\"checkbox\"]") is not a function"
$$('input[type="checkbox"]').observe('click', function(event) {
    alert("coucou");
});

Donc est-ce possible? Si oui, comment?

Merci par avance pour vos réponses.

[SpaceFrog]

à l'ancienne:

Code :

1
2
3
4
5
6
7
8
9
10
11
var TabInputs =document.getElementsByTagName('input');
 
var TabChecks=new Array();
 
for (i=0;i<TabInputs.length;i++){
 if (TabInputs[i].type.toLowerCase()="checkbox"){TabCheck.push(TabInputs[i])}
}
 
for (j=0;j<TabChecks.length;j++){
TabChecks[i].onclick=function(){alert("coucou"};
}

[franculo_caoulene]

Nan mais j'aurais quand même voulu faire ça en une seule ligne, vu que l'appli utilise prototype...

Décidément j'accroche pas, je vois pas ce qu'on lui trouve, mais bon c'est pas le sujet.

[SpaceFrog]

A piori d'après ce que j'ai pu rechercher il faut passer par un turc du style ...

Code :

1
2
3
4
5
6
7
var TabInputs =document.getElementsByTagName('input');
 
for (i=0;i<TabInputs.length;i++){
 if (TabInputs[i].type.toLowerCase()="checkbox"){Event.observe(TabInputs[i], 'click', function(event) {
    alert("coucou");
});}
}

[franculo_caoulene]

Justement ça n'a aucune intérêt! Avec jquery ça donne une ligne de mémoire :

Code :

1
2
3
$('input[type="checkbox"]').click(function() {
    alert("coucou");
});

Finalement je l'ai fait à l'ancienne...

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
var tabInput = document.getElementsByTagName('input');
var tabCheck = new Array();
 
for (i=0;i<tabInput.length;i++) {
    if (tabInput[i].type.toLowerCase()=="checkbox"){tabCheck.push(tabInput[i])}
}
 
for (j=0;j<tabCheck.length;j++){
    tabCheck[j].onclick = function(){  
             alert("coucou");
        });
    };
}

Après deux/trois petites corrections

[el_teedee]

Salut,

j'ai lu cette discussion car je cherchais à faire en sorte que sur l'appui d'entrée quand le focus est sur un select, mon formulaire de recherche soit posté, mais pas n'importe quel submit.

Au début, j'ai fait un onkeypress= document.monForm.submit() sur le <select>, mais le submit en question n'était pas identifiable. En effet, ayant plusieurs boutons de type submit, le premier caché pour l'appui sur entrée dans des input type text, des boutons 'Ajouter', 'Supprimer', 'Nouvelle recherche', et 'Recherche', je veux que ce soit le bouton 'Recherche' qui soit l'auteur de la soumission, afin de retrouver dans l'url postée : &rechercheBouton=Recherche par exemple.

Le code ci dessous, fait une ligne (xD), et branche sur tous les <select>, une action sur l'appui de la touche Entrée

La version en une ligne :

Code :

1
2
 
$A(document.getElementsByTagName("select")).each(function (leSelect) { Event.observe($(leSelect), "keydown", function(event){ if (event.keyCode == 13) { document.monForm.monBoutonSubmit.click(); } return false; }.bindAsEventListener($(leSelect)) ); }); }, false);

Maintenant la version compréhensible à la vue

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
Event.observe(window, "load", function(event){
$A(document.getElementsByTagName("select")).each(function (leSelect) {
	Event.observe($(leSelect), "keydown", function(event){
		if (event.keyCode == 13) {
			document.monForm.monBoutonSubmit.click();
		}
		return false;
		}.bindAsEventListener($(leSelect))
	);
});
 
}, false);

Ce code a été testé pour :

• Firefox 2.0.0.11
• IE 6
• IE 7
• Safari 3.0.3 For windows