Cette méthode pure CSS3 d’embellissement des boutons radio fonctionne bien dans les situations suivantes :
1. Il peut être compatible avec IE9 et versions supérieures, et si cela doit être compatible avec IE8, écrire le hack d’IE pour supprimer ce style
2. Seule la radio à bouton radio est prise en charge, car le cercle du style de sélection du bouton radio peut être créé avec CSS, mais la case à cocher nécessite une bibliothèque de polices d’images ou d’icônes
3. Aucun JS n’est nécessaire pour supporter les effets de commutation
L’image ci-dessous montre le rendu final :
Code HTML :
Code CSS :
Le plus important dans cette méthode est de sélectionner le nom de classe de l’effet : .radio input :checked + span.radio-on
+ est une pseudoclasse de CSS2, ce qui signifie que div+p sélectionne <div> tous les éléments immédiatement après <p> l’élément .
C’est-à-dire qu’on trouve l’entrée sélectionnée ( :checked), puis on utilise l’élément span nommé radio-on pour effectuer l’effet de cercle sélectionné.
Il existe de nombreuses méthodes d’embellissement sur Internet pour faire un cercle sur l’étiquette, mais dans ce cas, le texte de sélection unique doit être placé à l’extérieur de l’étiquette, ce qui fait qu’en cliquant sur le texte, l’effet de sélection unique ne peut pas être inversé.
J’ai donc ajouté une travée nommée radio-bg à l’étiquette pour former le grand cercle à l’arrière, puis j’ai utilisé une portée nommée radio-on pour faire le petit cercle à l’avant de la sélection.
De cette façon, le texte dans l’étiquette est préservé, et l’effet d’une seule sélection peut également être basculé.
En pièce jointe : jQuery prend la méthode de valeur de la radio sélectionnée
var val=$('input :radio[name="sex"] :checked').val() ;
Attachez les trois méthodes :
$('entrée :radio :checked').val() ;
$(« input[type='radio'] :checked »).val() ;
$(« input[name='rd'] :checked »).val() ;
|
Publié sur 16/05/2019 11:10:41
|
|
|
|
