A választógomb egy ikon, amelyet az űrlapokon használnak a felhasználó bevitelére. Lehetővé teszi a felhasználók számára, hogy egy értéket válasszanak a választógombok csoportjából. A rádiógombokat alapvetően a egyetlen választás több közül , amelyet leginkább a GUI űrlapokon használnak.
Két vagy több választógomb között csak egy rádiógombot jelölhet meg/pipálhat be. Ebben a fejezetben bemutatjuk, hogyan ellenőrizheti a rádiógombot a JavaScript programozási nyelv .
Ehhez először egy rádiót tartalmazó űrlapot tervezünk gombokat HTML használatával, majd JavaScript programozással ellenőrizzük a választógombot. Ellenőrizzük azt is, hogy melyik rádiógomb értéke van kiválasztva.
Hozzon létre egy rádiógombot
Az alábbiakban egy egyszerű kód található a rádiógombok csoportjának létrehozásához.
Kód másolása
mi az obj a java-ban
Válaszd ki a kedvenc évszakodat:
NyárTéli
Esős
Ősz
Tesztelje most
Ellenőrizze a rádiógombot
A rádiógomb ellenőrzéséhez nem kell külön kódot írnunk. A HTML-formátumban történő létrehozásuk vagy megadása után ellenőrizhetők.
Azonban meg kell írnunk a JavaScript kódot, hogy megkapjuk a bejelölt választógomb értékét, amit az alábbi fejezetben látni fogunk:
Ellenőrizze, hogy a rádiógomb be van-e választva vagy sem
A JavaScriptben kétféleképpen ellenőrizheti a megjelölt választógombot vagy azonosíthatja, hogy melyik választógomb van kiválasztva. A JavaScript két DOM-módszert kínál ehhez.
A bemeneti rádió ellenőrzött tulajdonsága annak ellenőrzésére szolgál, hogy a jelölőnégyzet be van-e jelölve vagy sem. Használat document.getElementById('id').ellenőrizve módszer erre. A rádiógomb ellenőrzött állapotát logikai értékként adja vissza. Lehet igaz vagy hamis is.
igaz - Ha a rádiógomb van kiválasztva.
Hamis - Ha a rádiógomb nincs kiválasztva/ bejelölve.
Tekintse meg az alábbi JavaScript kódot, hogy megtudja, hogyan működik:
Példa
Például van egy Nyár nevű választógombunk, és az id = 'nyár'. Most ezzel a gombazonosítóval ellenőrizzük, hogy a rádiógomb meg van-e jelölve vagy sem.
Kód másolása
if(document.getElementById('summer').checked == true) { document.write('Summer radio button is selected'); } else { document.write('Summer radio button is not selected'); } querySelector()
A querySelector() függvény a JavaScript DOM metódusa. A benne lévő rádiógombok közös név tulajdonságát használja. Ezt a módszert az alábbiak szerint használjuk annak ellenőrzésére, hogy melyik rádiógomb van kiválasztva.
document.querySelector('input[name='JTP']:checked')
Példa
Például van egy rádiógombcsoportunk, amelyek neve tulajdonságnév = 'szezon' az összes gombhoz. Most a szezon nevű gombok között ellenőrizzük, melyik van kiválasztva.
Kód másolása
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.write('Radio button is selected'); } else { document.write('Nothing has been selected'); } A bejelölt választógomb értékének lekérése:
A getElementById () használata
A következő kód az ellenőrzött rádiógomb értékének lekéréséhez a getElementById() metódussal:
Kód másolása
if(document.getElementById('summer').checked) { var selectedValue = document.getElementById('summer').value; alert('Selected Radio Button is: ' + selectedValue); } A querySelector() használata
A következő kód az ellenőrzött rádiógomb értékének lekéréséhez a querySelector() metódus segítségével:
Kód másolása
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { alert('Selected radio button values is: ' + getSelectedValue.value); } Teljes kód a kiválasztott választógomb értékének lekéréséhez
Ebben a példában az összes fenti kódot összerakjuk egy rádiógomb létrehozásához és ellenőrzéséhez. Ezt követően a kiválasztott választógomb értékét is lekérjük.
Kód másolása
<br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { if(document.getElementById('summer').checked) { document.getElementById('disp').innerHTML = document.getElementById('summer').value + ' radio button is checked'; } else if(document.getElementById('winter').checked) { document.getElementById('disp').innerHTML = document.getElementById('winter').value + ' radio button is checked'; } else if(document.getElementById('rainy').checked) { document.getElementById('disp').innerHTML = document.getElementById('rainy').value + ' radio button is checked'; } else if(document.getElementById('autumn').checked) { document.getElementById('disp').innerHTML = document.getElementById('autumn').value + ' radio button is checked'; } else { document.getElementById('error').innerHTML = 'You have not selected any season'; } } Tesztelje most Kimenet
Amikor végrehajtja a fenti kódot, az futni fog a weben, és az alábbiak szerint adja ki a kimenetet:
hogyan lehet oszlopot törölni a postgresql-ben
Válassza ki az egyik rádiógombot, és kattintson a gombra Beküldés gombot, és megkapja a kiválasztott értéket.
Ha nem választja egyik évszakot sem, és közvetlenül kattintson a Beküldés gombot, akkor egy hibaüzenet jelenik meg, Nem választottál ki egyetlen évszakot sem mert használtuk az érvényesítést.
A kiválasztott választógomb értékének lekérése: querySelector()
DOM querySelector() metódus
A querySelector() függvény a JavaScript DOM metódusa. Ezzel a módszerrel kapjuk meg a megadottnak megfelelő elemet CSS-választó a dokumentumban. Ne feledje, meg kell adnia a választógomb név tulajdonságát a HTML-kódban.
Úgy használják, mint document.querySelector('input[name='JTP']:checked') benne fület a választógombok csoportjából kiválasztott választógomb értékének ellenőrzéséhez. Minimalizálja a kód hosszát azáltal, hogy egy kis kódsor segítségével megkapja a kiválasztott rádiógomb értékét.
karakterlánc a jsonobjecthez
var selectedValue = document.querySelector('input[name='JTP']:checked')
Tekintse meg az alábbi kódot, hogyan fogja használni a HTML űrlapot:
Kód másolása
<br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.getElementById('disp').innerHTML = getSelectedValue.value + ' season is selected'; } else { document.getElementById('error').innerHTML = '*You have not selected any season'; } } Tesztelje most Kimenet
Amikor végrehajtja a fenti kódot, az alább látható kimenetet fogja megjeleníteni a weben. Itt válaszd ki kedvenc évszakodat.
Amikor kiválaszt egy értéket az adott választógomb között, és rákattint a Beküldés gombot, a kiválasztott értéket megkapja a weben.
Abban az esetben, ha rákattint a Beküldés gombot anélkül, hogy bármelyik választógombot választaná, hibaüzenet jelenik meg, Nem választottál ki egyetlen évszakot sem .
Tehát itt láthatod mindkettőt getElementById('szezon').érték és document.querySelector('input[name='JTP']:checked') ugyanúgy működni. Mindkettő a bejelölt választógomb értékének meghatározására szolgál. Használhatja bármelyiket.
getElementById vs querySelector
A getElementByID() és a querySelector() DOM metódusok szinte ugyanúgy működnek. Azonban néhány különbség is van köztük, például a teljesítmény és a kód mérete stb. Lássunk néhány különbséget köztük:
A kód hossza
A getElementById-vel írt kód egy kicsit hosszabb, mint a querySelector. A getElementById metódus használatával minden választógombot külön-külön kell ellenőriznünk, hogy melyik van bejelölve.
Másrészt, ha a querySelector DOM metódust használja, akkor csak egyetlen kódsort kell beírnia a megjelölt választógomb ellenőrzéséhez és az értékének megállapításához. Tehát a következtetés az, hogy a querySelector kevesebb kódot igényel.
Teljesítmény
Mindkét funkció jó teljesítményt nyújt, de csak annyit kell tudnia, melyik a jobb. A getElementById módszer sokkal gyorsabb, mint a querySelector módszer. A querySelector metódus is egy kicsit összetett.
A DOM metódusok által használt érték
A getElementById metódus mindig minden rádiógomb egyedi azonosítóját használja, miközben ellenőrzi a megjelölt gombot, és visszaadja az első elemet, amely megegyezik az azonosítóval.
Míg a querySelector egy közös név (választó) az összes választógombra, hogy megkapja a megjelölt választógombot, és visszaadja az első elemet, amely megfelel a megadott választónak.