Members programYaz Posted April 26, 2022 Members #1 Share Posted April 26, 2022 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: <!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> Quote Ada LoveLace Link to comment Share on other sites More sharing options...
