Checkbox ve radio
checked özelliği ile checkbox ve radio düğmelerinin durumunu okumayı öğrenirsin.
checked özelliği
Bir <input type="checkbox"> öğesinin seçili olup olmadığını checked özelliği ile okursun. Bu özellik true veya false döndürür.
const agree = document.querySelector('#agree');
if (agree.checked) {
console.log('Onaylandı');
}value özelliği checkbox için anlamsızdır; seçim durumu yalnızca checked ile anlaşılır. Aynı özellik radyo düğmeleri için de çalışır.
Radyo grubunu taramak
Birden çok <input type="radio"> öğesini aynı name değeriyle gruplarsın. Tüm grubu almak için querySelectorAll kullanırsın.
const radios = document.querySelectorAll('input[name="size"]');
for (const radio of radios) {
if (radio.checked) {
console.log(radio.value);
}
}Aynı ada sahip radyo düğmelerinden yalnızca biri seçili olabilir. Döngü ile her birine bakıp checked olanı bulursun.
Uygulama Checkbox ve radyo durumunu oku
agree değişkeni 'agree' adlı checkbox'ı gösteriyor. checked özelliği ile seçili mi diye bak. Seçiliyse 'Onaylandı', değilse 'Onay gerekli' yazdır. Ardından 'size' adlı radyo grubundan seçili düğmeyi bul ve değerini konsola yazdır.
Örnek çözümü göster
if (agree.checked) {
console.log('Onaylandı');
} else {
console.log('Onay gerekli');
}
const radios = document.querySelectorAll('input[name="size"]');
for (const radio of radios) {
if (radio.checked) {
console.log(radio.value);
}
}Kendini test et
-
Radyo grubunu name ile seç
const radios = document.querySelectorAll('input[____="size"]');Cevabı göster
const radios = document.querySelectorAll('input[name="size"]'); -
Hangisi checkbox'ın seçili olduğunu kontrol eder?
const cb = document.querySelector('#agree'); // A if (cb.value) { console.log('OK'); } // B if (cb.selected) { console.log('OK'); } // C if (cb.checked) { console.log('OK'); } // D if (cb.on) { console.log('OK'); }- A
- B
- C
- D
Cevabı göster
C — Doğru! checked özelliği true/false döner ve seçim durumunu verir.
-
Özellikleri anlamlarıyla eşleştir
- checkbox.checked
- Seçili mi
- radio.value
- Düğmenin değeri
- input[name="size"]
- Ad özniteliğiyle seçim