UX/Jquery : ajouter un style aux boutons radios sélectionnés

Pour rendre un peu plus ergonomique les éléments du type radio ou checkbox, vous pouvez mettre en évidence les boutons ou checkbox sélectionnés.
Ex :
[jsfiddle url= »http://jsfiddle.net/prestashop/TTF2T/ » height= »300px » include= »result,html,js,css »]

Explication du script Jquery

1. Au chargement de la page, on ajoute le style selected au div parent pour appliquer la mise en forme aux labels des boutons radio sélectionnés par défaut:
   [code lang= »js »]
   $(document).ready(function () {
   $(‘.ux :radio:checked’).parent().addClass(‘selected’);
   });
   [/code]
2. On utilise ensuite la fonction change pour supprimer le style lorsque l’utilisateur clique sur un autre bouton radio puis on ajoute le style selected au div parent du bouton radio sélectionné,
   [code lang= »js »]
   $(document).ready(function () {

   $(‘.ux :radio:checked’).parent().addClass(‘selected’);
   $(‘.ux :radio’).change(function () {
   $(‘:radio[name=’ + this.name + ‘]’).parent().removeClass(‘selected’);
   $(this).parent().addClass(‘selected’);
   });
   });
   [/code]