Étiquette : radio

[Javascript] Annuler la sélection d’un bouton radio

Décocher un bouton radio sélectionné en cliquant dessus. Source: How to make a radio button unchecked by clicking it?

[Magento 2] Rajouter des préfixes de civilités sous forme de boutons radio dans le formulaire de création de compte

Attention: astuce fonctionnelle sur une version de Magento 2.4 Enterprise. Je crois que toute la partie attributs des customers n’est pas disponible en version Community Edition. Mais cette astuce pourrait très bien fonctionner avec les deux versions.

PHTML à modifier

Créer le fichier de surcharge app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/name.phtml pour remplacer l’élément Select par des boutons Radio:

A savoir:

Sans ajouter le bout de code ci-dessous, l’information sur le préfixe coché lors de l’inscription ne sera PAS récupérée pour des affichages ultérieurs des préfixes dans les pages du site.

Par exemple, dans la page « Modifier les informations de mon compte », les boutons radio représentant les préfixes disponibles s’affichaient bien, mais celui qui avait été coché lors de l’inscription n’était pas coché!

Manipulations à effectuer en BO – Afficher les préfixes (Madame, Monsieur) dans le formulaire de création de compte

  • Se rendre dans STORES > Attributes > Customer
  • Dans la liste des attributs, sélectionner l’Attribute Code « prefix »
  • Scroller jusqu’au volet « Storefront Properties »
  • Passer le champ « Show on Storefront » à « Yes »
  • Cliquer sur le bouton orange « Save Attribute »
  • Se rendre ensuite dans STORES > Settings > Configuration
  • Passer le Scope au store voulu
  • Dans la navigation de gauche, aller dans CUSTOMERS > Customers Configuration
  • Ouvrir le volet « Name and Address Options »
  • Au niveau du champ « Prefix Dropdown Options », décocher la case « Use Defaults »
  • Dans le champ « Prefix Dropdown Options », saisir les préfixes séparés par des point-virgules (exemple: Madame;Mademoiselle;Monsieur)
  • Cliquer sur le bouton orange « Save Config »
  • Se rendre ensuite dans SYSTEM > Tools > Cache Management
  • Cocher les « Cache Type » « Configuration » et « Page Cache » (leur « Status » est normalement en « INVALIDATED »
  • Au niveau de la liste de sélection située en haut à gauche du tableau, sélectionner « Refresh » et cliquer sur le bouton gris « Submit »

[Magento 2] Des cases à cocher et des boutons radio sexy dans vos formulaires avec le markup HTML du core

ATTENTION: les input et label doivent respectivement avoir des attributs for et id ayant une valeur identique afin que les styles fonctionnent correctement!

[jQuery] Détecter les changements d’état (coché/pas coché) d’un champ radio ou checkbox et agir en fonction

Sources:

[jQuery] Cliquer sur une zone contenant un input type radio ou checkbox actionne le booléen

Ressources en ligne: Setting “checked” for a checkbox with jQuery?

ATTENTION: l’utilisation de $(this) dans la fonction pour récupérer l’élément cliqué empêche le clic sur l’élément <input type="checkbox" /> lui-même! On préférera utiliser event.target pour cibler l’élément cliqué.

Code non commenté


Code commenté

[jQuery] Activer un bouton radio ou une checkboxe en cliquant sur un autre élément avec la méthode .prop()

Case à cocher (checkbox)

En cliquant sur div#loyaltyCardForm, on active la checkboxe input#offerLoyaltyCard


Bouton radio

Source: Toggling Radio Buttons with jQuery et jsFiddle.

Avec 2 boutons radio seulement

Source: jsFiddle.

Avec plus que 2 boutons radio

Source: jsFiddle.

[jQuery] Vérifier si au moins une case à cocher ou un bouton radio est coché

Source : CHECK IF ANY CHECKBOXES ARE SELECTED IN JQUERY

Cas un peu plus complexe :

Codes HTML et SASS purement indicatifs (ne pas copier/coller en l’état)

[CSS] Rendre un input type radio ou checkbox invisible mais cliquable

Simulation jsFiddle.net

Source : make an input invisible but clickable through CSS?

Changer les dimensions d’un input type radio ou checkbox

Sources : How to change the size of the radio button using CSS? et Styling radio buttons with CSS.

Attention : sous Firefox, l’élément ne grossit pas visuellement, mais la zone cliquable oui 🙂

Cette technique est intéressante si on cherche à cacher un champ radio ou checkbox sous un élément qui le remplacerait visuellement (habillage spécifique de l’UI).

Un polyfill pour émuler les effets de la propriété CSS pointer-events sous IE9

La propriété CSS pointer-events n’est pas prise en charge par IE9 (et plus anciens). Un polyfill en jQuery nommé Pointer Events Polyfill (source GitHub) existe et fonctionne très bien.

[CSS] Styler tous les éléments de formulaires de façon sexy et uniquement avec CSS

Source : Custom Style All Your Form Elements with Pure CSS and No JavaScript

Styler l’élément HTML Select avec CSS

(Works in IE8+, FF, Webkit)

Une variante sans image de fond avec Bootstrap 3 et le composant CSS .caret

sexy-select_variante_bootstrap-caret

[jQuery] Agir uniquement sur des blocs contenant des boutons radio ou des cases à cocher possédant un attribut Name dont la valeur est identique

A voir aussi : Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut onclick="" placé sur le booléen.

_input-box-multiple-focus

Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut onclick="" placé sur le booléen

Ajouter une ligne de code jQuery pour statuer qu’un clic utilisateur sur une zone .radio-box, compte pour un clic sur le champ radio ou checkbox dont il est le parent.