jQuery checkbox Kullanarak Resim Gizleme

sdkbyrm

olwα.ɴeт
Üyelik Tarihi
23 Aralık 2020
Mesajlar
813
Beğeniler
1
Puanı
3
Ticaret: 0 / 0 / 0
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>
 
Üst Alt