Bu örneğimizde jQuery ile radio button kullanarak dört işlem (toplama,çıkarma,çarpma,bölme) gerçekleştireceğiz. Örneğimizde seçili olan radio öğesine göre gerçekleştireceğimiz işlemi sayfamızda sonuç için ayrılmış div içinde göstereceğiz. Örneğe ait ekran görüntüleri ve kodları aşağıda inceleyebilirsiniz.
Kodlar:
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> 1. Sayı: <input type="text" id="txtSayi1"><br> 2. Sayı: <input type="text" id="txtSayi2"><br> <input id="r1" type="radio" name="islem" >Topla <input id="r2" type="radio" name="islem" >Çıkar <input id="r3" type="radio" name="islem" >Çarp <input id="r4" type="radio" name="islem" >Böl <br> <input type="button" id="btn" value="HESAPLA"><br> <div id="sonuc"></div> <script> $(document).ready(function(){ $("#btn").on("click",function(){ var sayi1=Number($("#txtSayi1").val()); var sayi2=Number($("#txtSayi2").val()); var sonuc=0; if($("#r1").prop("checked")==true) { sonuc=sayi1+sayi2; } else if($("#r2").prop("checked")==true) { sonuc=sayi1-sayi2; } else if($("#r3").prop("checked")==true) { sonuc=sayi1*sayi2; } else if($("#r4").prop("checked")==true) { sonuc=sayi1/sayi2; } else { alert("Seçim Yapınız.") } $("#sonuc").html(sonuc); }); }); </script> </body> </html> |
