JavaScript ile checkbox seçili olup olmadığını kontrol etmek için checkbox nesnesinin checked özelliğini kontrol etmek gerekir. Eğer checked özelliği true değerini döndürüyorsa seçili, false değerini döndürüyorsa seçilmemiş demektir.
Ayrıca bilinmesi gereken bir durumda checked özelliği setter ve getter türünde bir özelliktir. değer okunabileceği gibi üzerine değer de yazmak mümkündür. Bir butonla ilgili checkbox nesesinin durumunu değiştirmek mükündür.
Örnek: checkbox nesnesinin durumunu öğrenme
1 2 3 4 5 6 7 8 9 10 | <body> Futbol:<input type="checkbox" id="hobi1" value="Futbol" checked><br> <script> var hobi1=document.querySelector("#hobi1"); window.alert(hobi1.checked); //true değerini döndürecek. </script> </body> |
Örnek 2: Seçili hobileri butona tıkladığında ekrana uyarı olarak veren uygulama
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 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Tasarim Kodlama</title> </head> <body> Futbol: <input type="checkbox" id="hobi1" class="hobi" value="Futbol" checked><br> Yüzme: <input type="checkbox" id="hobi2" class="hobi" value="Yüzme"><br> Basket: <input type="checkbox" id="hobi3" class="hobi" value="Basketbol"><br> <button type="button" id="kontrol">Seçili Hobileri Yazdır</button> <script> var hobiler=document.querySelectorAll(".hobi"); //class adı ile uyuşan tüm nesneler var kontrol=document.querySelector("#kontrol");//id ile uyuşan tek nesne kontrol.onclick=function(){ //forEach ile tüm hobiler üzerinde döneceğiz hobiler.forEach(function(element){ //seçili olan hobiyi bulmak için if(element.checked==true) { window.alert(element.value);//seçili hobinin içindeki değer } }); } </script> </body> </html> |
Örnek 3: Buton tıklaması ile seçili olan hobilerin seçinimi değiştirme
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 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Tasarim Kodlama</title> </head> <body> Futbol: <input type="checkbox" id="hobi1" class="hobi" value="Futbol" checked><br> Yüzme: <input type="checkbox" id="hobi2" class="hobi" value="Yüzme"><br> Basket: <input type="checkbox" id="hobi3" class="hobi" value="Basketbol"><br> <button type="button" id="kontrol">Seçili Hobileri Yazdır</button> <script> var hobiler=document.querySelectorAll(".hobi"); //class adı ile uyuşan tüm nesneler var kontrol=document.querySelector("#kontrol");//id ile uyuşan tek nesne kontrol.onclick=function(){ //forEach ile tüm hobiler üzerinde döneceğiz hobiler.forEach(function(element){ element.checked=!element.checked; }); } </script> </body> </html> |
Yorum Yap