Discussion :

[ludojojo]

Bonjour,

J'aurais besoin de vos lumière concernant un petit bug dans mon script...
Je souhaite modifier un ensemble de checkbox, pour ce faire j'utilise ce script tout simple qui me construit deux array (via jQuery) un avec les checkbox sélectionnées et l'autre avec celles qui ne le sont pas.

Je ne savais pas que c'était possible, mais il semble que l'on puisse modifier les propriétés d'un ensemble d'éléments d'un tableau via la fonction attr() de jQuery... J'utilise cette méthode afin de ne pas refaire une itération sur toutes les checkbox.
Ca fonctionne la première fois dans les deux sens, mais plus par la suite.

En analysant un peu le comportement du script, je me rend compte que le test est bon mais que c'est la mise à jour du tableau qui ne fonctionne pas.
La question est donc, suis-je obligé de faire une intération sur chaque élément de mon array pour mettre à jour la propriété "checked" ou est ce que j'ai simplement oublié quelque chose ?

[SpaceFrog]

En effet, le souci provient de l'utilisation de attr checked
Il est préférable d'utiliser prop checked

J'en ai profité au passage pour rationaliser ton code
http://jsfiddle.net/Vx6f8/6/

[ludojojo]

Arf, j'ai toujours un doute entre les deux, utilisation de attr ou de prop... Juste pour ma culture personnelle, il y'a une bonne pratique pour justifier l'utilisation de l'un ou de l'autre ?
Il me reste plus qu'à adapter le code pour prendre en compte ma gestion des ressources et le nombre aléatoire de checkbox et ce sera parfait !

Merci encore pour ton aide !

[Spartacusply]

En effet, le souci provient de l'utilisation de attr checked

C'est un bug en fait ou pas ? Moi aussi j'ai eu le même problème et après avoir chercher un moment, j'ai fini par me faire une fonction qui coche ou décoche les checkbox un à un dans une boucle each..

[Bovino]

Non, ce n'est pas un bogue et c'est plutôt bien expliqué dans la doc de jQuery.

Une page Web se compose de divers éléments, en particulier le code HTML et le DOM qui transcrit le HTML en objets JavaScript.
Ainsi, un attribut HTML et une propriété JavaScript correspondant à cet attribut, ce n'est pas tout à fait pareil.
Donc .attr() manipule les attributs HTML et .prop() manipule les propriétés JavaScript.

Maintenant, lorsque tu écris dans le code HTML

Code html :

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

<input type="checkbox" checked />

Cela signifie qu'au chargement de la page, la case sera cochée. Lorsque JavaScript va parser le DOM, il va donc affecter la propriété checked de l'objet DOM correspondant à la balise à true (noter le cas spécifique des attributs booléens : en HTML, la seule présence de l'attribut permet d'activer la fonctionnalité, alors qu'en JavaScript, la propriété existe toujours et vaut un booléen).
Seulement, une que tu cliques sur la case, elle se décoche, mais l'attribut HTML est toujours présent, ce qui fait qu'il y a une différence entre l'attribut et la propriété.

[SpaceFrog]

attr pointe sur l'attribut de la balise
prop pointe sur la propriété de l'élement du DOM

Il se peut que la balise ne possède par d'attribut checked => il est préférable de passer par l'a propriété de l'objet dans le DOM

Voici une version avec nbr de checkboxes variable
http://jsfiddle.net/Vx6f8/7/

[ludojojo]

Merci à tous les deux pour ces explications, c'est beaucoup plus clair maintenant.
J'était persuadé que les propriétés des objects JavaScript et du DOM étaient mis à jour en ne même temps et que donc agir sur la propriété checked ou sur le DOM checked avait le même résultat...

[Bovino]

La plupart du temps, c'est la cas, mais ce n'est pas toujours vrai.
A titre d'exemple, j'avais fait une petite page de test concernant ce sujet.