Bu yazımızda jQuery ile checkbox kullanımını gösteren basit bir örnek gerçekleştireceğiz. Örneğimizde sayfamıza eklenen resmin checkbox seçili iken sayfamızda görüntülenmesini, seçili değil iken ise gizlenmesini sağlayacağız. Gizleme ve görüntüleme işlemini slideUp ve slideDown metotlarını kullanarak animasyonlu bir şekilde oluşturacağız.
Kodarımızı checkbox kontrolünün change olayını kullanarak yazacağız.
.html sayfasına ait 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 |
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <title>Jquery Örnekler</title> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> <style> #kutu1{ height: 250px; } img{ height: 230px; } </style> </head> <body> <div id="kutu1"> <img src="resim/4.png" id="resim"> </div> <div id="kutu2"> <input type="checkbox" id="chk" checked> Resmi Göster </div> <script> //Onay kutusu onaylandığında resim görünsün onayı kaldırıldığında resim görünmesin $(document).ready(function() { $("#chk").on("change",function(){ if($(this).prop("checked")==true){ $("#resim").slideDown(2000); }else{ $("#resim").slideUp(2000); } }); }); </script> </body> </html> |
