Šis grynas CSS3 radijo mygtukų gražinimo būdas puikiai veikia šiose situacijose:
1. Jis gali būti suderinamas su IE9 ir naujesnėmis versijomis, o jei jis turi būti suderinamas su IE8, parašykite IE įsilaužimą, kad pašalintumėte stilių
2. Palaikomas tik radijo mygtuko radijas, nes radijo mygtuko pasirinkimo stiliaus apskritimą galima sudaryti naudojant CSS, tačiau žymės mygtuko žymimajam laukeliui reikalinga paveikslėlio arba piktogramos šriftų biblioteka
3. Norint palaikyti perjungimo efektus, JS nereikia
Žemiau esantis paveikslėlis yra galutinis atvaizdavimas:
HTML kodas:
CSS kodas:
Svarbiausias dalykas šiame metode yra pasirinkti efekto klasės pavadinimą: .radio input:checked + span.radio-on
+ yra CSS2 pseudoklasė, o tai reiškia, kad div+p pasirenka <div> visus elementus iškart po elemento <p> .
Tai yra, suraskite pasirinktą įvestį (:checked), tada naudokite intervalo elementą, pavadintą radio-on, kad padarytumėte pasirinktą apskritimo efektą.
Internete yra daugybė gražinimo būdų, kaip etiketę paversti apskritimu, tačiau šiuo atveju vienas pasirinkimo tekstas turi būti dedamas už etiketės ribų, o tai lemia tai, kad spustelėjus tekstą negalima perjungti vieno pasirinkimo efekto.
Taigi prie etiketės pridėjau tarpą, pavadintą radio-bg, kad gale būtų didelis apskritimas, o tada naudojau tarpą, pavadintą radio-on, kad mažas apskritimas būtų pasirinkimo priekyje.
Tokiu būdu išsaugomas etiketės tekstas, taip pat galima perjungti vieno pasirinkimo efektą.
Pridedama: jQuery priima pasirinkto radijo reikšmės metodą
var val=$('input:radio[name="sex"]:checked').val();
Pridėkite visus tris metodus:
$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
|
Paskelbta 2019-05-16 11:10:41
|
|
|
|
