Ebben a cikkben látni fogjuk, hogyan kell dolgozni a jquery választógombbal ellenőrzött eseményeivel. A választógombok HTML gombok, amelyek segítenek kiválasztani egyetlen értéket egy csoportból.
Számos attribútum kapcsolódik a bemeneti típusú választógombhoz. Ebben az oktatóanyagban látni fogjuk, hogyan indítható el a jquery esemény, amikor a választógombot bejelöli vagy módosítja a felhasználói tevékenységtől függően.
Amikor a felhasználó megváltoztatja az opció értékét a választógombok segítségével, hogyan indítsa el a jquery eseményt, ebben a cikkben részletesen megtudjuk.
Tudj meg többet -
Kezdjük el.
Alkalmazás létrehozása
Hozzon létre egy mappát radio-event néven. Hozzon létre benne egy index.html fájlt.
Nyissa meg az index.html-t, és írja be a teljes kódot.
<!DOCTYPE html> <html lang="en"> <head> <title>Work with Radio Button Checked Event in jQuery</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <h3>Work with Radio Button Checked Event in jQuery</h3> <div class="panel panel-primary"> <div class="panel-heading">Work with Radio Button Checked Event in jQuery</div> <div class="panel-body"> Select Here - <br/> <input type="radio" name="course" value="1"> Laravel 8 <br /> <input type="radio" name="course" value="2"> CodeIgniter 4 <br /> <input type="radio" name="course" value="3"> jQuery <h3 id="course_selected"></h3> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function() { $('input[type=radio][name=course]').change(function() { var selectedValue = this.value; if (selectedValue == 1) { $("#course_selected").text("Welcome to Laravel 8 course"); } else if (selectedValue == 2) { $("#course_selected").text("Welcome to CodeIgniter 4 course"); } else if (selectedValue == 3) { $("#course_selected").text("Welcome to jQuery course"); } }); }); </script> </body> </html>
Alkalmazás tesztelése
Nyissa meg a böngészőt, és írja be ezt -
URL - http://localhost/radio-event/index.html
Reméljük, hogy ez a cikk segített abban, hogy nagyon részletesen megtanulja, hogyan kell a jquery oktatóprogramjában a rádiógombbal ellenőrzött eseményt használni.
Ha tetszett ez a cikk, kérjük, iratkozzon fel YouTube csatornánkra a PHP-hez és annak keretrendszeréhez, valamint a WordPress és a Node Js oktatóvideóihoz. Megtalálhat minket a és a címen is.
Tudjon meg többet a jQuery és a Javascript koncepcióról
Eredetileg a https://onlinewebtutorblog.com oldalon tették közzé 2021. augusztus 30-án.
