Kullanıcı programYaz Oluşturulma : 26 Nisan, 2022 Kullanıcı #1 Paylaş Oluşturulma : 26 Nisan, 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> Alıntı Ada LoveLace Yorum bağlantısı Şimdi Paylaş Daha fazla paylaşma seçeneği...
