Prestarocket

Blog

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 :

Voir la démonstration sur JSFiddle

Explication du script Jquery

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:

$(document).ready(function () {
    $('.ux :radio:checked').parent().addClass('selected');
});

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

$(document).ready(function () {

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