Ta čista metoda CSS3 za polepšanje radijskih gumbov deluje dobro v naslednjih situacijah:
1. Lahko je združljiv z IE9 in novejšimi, in če mora biti združljiv z IE8, napiše IE-jev hack za odstranitev tega sloga
2. Podprt je samo radio z radijskimi gumbi, saj je krog izbire gumbov mogoče ustvariti s CSS, vendar označilno polje za označilno polje na gumbu zahteva knjižnico slikovnih ali ikonskih pisav
3. Za podporo preklopnim učinkom ni potreben JS
Spodnja slika prikazuje končno upodobitev:
HTML koda:
CSS koda:
Najpomembnejše pri tej metodi je izbrati ime razreda učinka: .radio input:checked + span.radio-on
+ je psevdorazred CSS2, kar pomeni, da div+p izbere <div> vse elemente takoj za elementom <p> .
To pomeni, da najdeš izbrani vhod (:kljukano) in nato uporabiš element razpona z imenom radio-on za učinek izbranega kroga.
Na internetu obstaja veliko metod za polepšanje oznake v krog, vendar mora biti v tem primeru posamezno izbirno besedilo postavljeno zunaj oznake, kar pomeni, da ob kliku na besedilo učinek enojnega izbora ni mogoče preklopiti.
Zato sem na etiketo dodal razpon z imenom radio-bg, da sem ustvaril velik krog na koncu, nato pa uporabil razpon z imenom radio-on, da sem naredil majhen krog na začetku izbora.
Na ta način se besedilo v oznaki ohrani, učinek enojne izbire pa je mogoče tudi preklopiti.
Priloženo: jQuery uporablja metodo vrednosti izbranega radia
var val=$('input:radio[name="sex"]:checked').val();
Priložite vse tri metode:
$('input:radio:checked').val();
$("input[type='radio]:checked").val();
$("input[name='rd']:checked").val();
|
Objavljeno na 16. 05. 2019 11:10:41
|
|
|
|
