Rádio gombok kezelése
Rádiógomb állapotának ellenőrzése:
Ez a rövid kis js lekérdezni, hogy be van-e kapcsolva a rádiógombunk. Ha igen, akkor értéke ‘true’ lesz. Most alapból erre állítottuk. A rádiógombot is a szokásos getElementById-val érjük el.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <body> Radio button:<input type="radio" id="radiogomb" checked> <p>Be van-e kapcsolva a radio gomb?</p> <button onclick="myFunction()">Teszt</button> <p id="demo"></p> <script> function myFunction() { var x = document.getElementById("radiogomb").checked; document.getElementById("demo").innerHTML = x; } </script> </body> </html> |
2. példa A második példában megnézzük, hogyan lehet függvény segítségével be és kikapcsolni egy rádiógombot. (Az űrlapon 2db rádiógomb lesz. A rádiógombok közül egyszerre csak egy lehet kiválasztva! )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<html> <body> <form> Melyik színt szereted?<br> <input type="radio" name="colors" id="red">Piros<br> <input type="radio" name="colors" id="blue">Kék </form> <button onclick="check_red()">Piros be</button> <button onclick="uncheck_red()">Piros ki</button><br> <button onclick="check_blue()">Kék be</button> <button onclick="uncheck_blue()">Kék ki</button> <script> function check_red() { document.getElementById("red").checked = true; } function uncheck_red() { document.getElementById("red").checked = false; } function check_blue() { document.getElementById("blue").checked = true; } function uncheck_blue() { document.getElementById("blue").checked = false; } </script> </body> </html> |
3. példa A harmadik példában rádiógombbal fogjuk állítani egy szövegbeviteli mező tartalmának betűit. A szöveg lehet kisbetűs, vagy nagybetűs. Szöveg nagybetűssé alakítása: toUppercase(), kisbetűssé alakítása: toLowerCase()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<html> <body> <form> Teszt: <input type="text" size="30" id="szoveg" value="Kisbetűs vagy nagybetűs"> Legyen nagybetűs <input type="radio" id="radio1" onclick="if(this.checked){myFunction()}"> Legyen kisbetűs <input type="radio" id="radio2" onclick="if(this.checked){myFunction2()}"> </form> <script> function myFunction() { document.getElementById("szoveg").value=document.getElementById("szoveg").value.toUpperCase(); document.getElementById("radio2").checked = false; } function myFunction2() { document.getElementById("szoveg").value=document.getElementById("szoveg").value.toLowerCase(); document.getElementById("radio1").checked = false; } </script> </body> </html> |
4. példa: Válasszuk ki rádiógomb segítségével, hogyan kérjük a kávénkat. A rádiógomb értékét átadjuk egy szövegbeviteli mezőnek. Ezzel például összesíteni lehet egy rendelésnél a tételeket.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<html> <body> <p>Hogyan szeretné a kávéját?</p> <form action="/action_page.php"> <input type="radio" name="coffee" value="cukorral">Csak cukorral<br> <input type="radio" name="coffee" value="feketén">Feketén<br> <input type="radio" name="coffee" value="cukorral és tejszínnel">Cukorral és tejszínhabbal<br> <br> <input type="button" onclick="myFunction()" value="Send order"> <br><br> <input type="text" id="order" size="50"> <input type="submit" value="Submit"> </form> <script> function myFunction() { var coffee = document.forms[0]; var txt = ""; var i; for (i = 0; i < coffee.length; i++) { if (coffee[i].checked) { txt = txt + coffee[i].value + " "; } } document.getElementById("order").value = "Kávé: " + txt; } </script> </body> </html> |
CheckBox
A checkbox-nál egyszerre többet is kijelölhetünk egy csoporton belül.
Példa: pizza feltétek
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <body> <p>Pizza</p> <form> <input type="checkbox" name="pizza" value="extra sajt">Extra sajttal<br> <input type="checkbox" name="pizza" value="extra gomba">Extra gombával<br> <input type="checkbox" name="pizza" value="bacon">bacon<br> <input type="checkbox" name="pizza" value="extra sonkával">Extra sonka<br> <br> <input type="button" onclick="myFunction()" value="Send order"> <br><br> <input type="text" id="order" size="80"> <input type="submit" value="Submit"> </form> <script> function myFunction() { var pizza = document.forms[0]; var extrak = ""; var i; for (i = 0; i < pizza.length; i++) { if (pizza[i].checked) { extrak = extrak + pizza[i].value + " "; } } document.getElementById("order").value = "Pizza extra feltétek: " + extrak; } </script> </body> </html> |
SELECT, illetve több elem kiválasztása
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<html> <body> <label for="extrak">Választható feltétek:</label><br><br> <select id="extrak" multiple="multiple"> <option value="bacon">bacon</option> <option value="sajt">sajt</option> <option value="kolbász">kolbász</option> <option value="gomba">gomba</option> </select> <button id="submit" onclick="feltetek()">Ok</button> <script> //document.getElementById('submit').onclick = function() { function feltetek(){ var tomb = []; for (var valasztott of document.getElementById('extrak').options) { if (valasztott.selected) { tomb.push(valasztott.value); } } db=tomb.length; document.getElementsByTagName('div')[0].innerHTML="Választott: " +tomb; document.getElementById('feltetar').innerHTML="Feltétek ára: " +db*50; } </script> <br> <div id="eredmeny"> </div> <p id="feltetar"> </p> </body> </html> |