Denne rene CSS3-metode til at forskønne radioknapper fungerer godt i følgende situationer:
1. Den kan være kompatibel med IE9 og nyere, og hvis den skal være kompatibel med IE8, skriv IE's hack for at fjerne stilen
2. Kun radioknapradio understøttes, fordi cirklen i radioknapvalgsstilen kan laves med CSS, men afkrydsningsboksen kræver et billed- eller ikonskriftbibliotek
3. Der kræves ingen JS for at understøtte switching-effekter
Billedet nedenfor er den endelige rendering:
HTML-kode:
CSS-kode:
Det vigtigste i denne metode er at vælge klassenavnet på effekten: .radio input:checked + span.radio-on
+ er en pseudoklasse af CSS2, hvilket betyder, at div+p vælger <div> alle elementer umiddelbart efter elementet <p> .
Det vil sige, find det valgte input (:checked), og brug derefter span-elementet radio-on til at udføre den valgte cirkel-effekt.
Der findes mange forskønnelsesmetoder på internettet til at gøre etiketten til en cirkel, men i dette tilfælde skal den enkelte markeringstekst placeres uden for etiketten, hvilket fører til, at når man klikker på teksten, kan den enkelte markeringseffekt ikke skiftes.
Så jeg tilføjede et spænd kaldet radio-bg til etiketten for at lave den store cirkel bagpå, og brugte derefter et spænd kaldet radio-on til at lave den lille cirkel foran i udvalget.
På denne måde bevares teksten i etiketten, og effekten af enkelt udvælgelse kan også slås fra.
Vedhæftet: jQuery bruger værdimetoden for den valgte radio
var val=$('input:radio[name="sex"]:checked').val();
Vedhæft alle tre metoder:
$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
|
Opslået på 16/05/2019 11.10.41
|
|
|
|
