Tagradio

[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.

[CSS] Des boutons radio et des cases à cocher de formulaire sexys et accessibles

From scratch (pas de markup imposé)

Simulation : http://jsfiddle.net/frontenddeveloper/3w5gvhyL/.

Ressource externe (Accessible) : https://github.com/stevenMouret/css-custom-radio-checkbox.

Markup formulaires Drupal 7

Valable également si le module Webform est utilisé.

[jQuery] Rendre un bloc contenant un input radio entièrement cliquable

© 2020 devfrontend.info

Theme by Anders NorénUp ↑