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'); }

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

Sıradaki ders: Özet - Formlar

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler