Cara Memeriksa Status Checkbox di JavaScript

Mengecek status checkbox dipakai untuk persetujuan syarat, filter produk, atau fitur “pilih semua”. Artikel ini membahas cara memeriksa status checkbox di JavaScript.

Properti checked

<input type="checkbox" id="setuju"> Saya setuju

<script>
const cb = document.getElementById("setuju");
console.log(cb.checked); // true atau false
</script>

Contoh Kasus: Aktifkan Tombol Setelah Menyetujui

<script>
const cb = document.getElementById("setuju");
const tombol = document.getElementById("daftar");
cb.addEventListener("change", function() {
    tombol.disabled = !cb.checked; // aktif hanya jika dicentang
});
</script>

Contoh Kasus: Fitur “Pilih Semua”

<script>
document.getElementById("semua").addEventListener("change", function() {
    document.querySelectorAll(".item").forEach(item => {
        item.checked = this.checked;
    });
});
</script>

Menghitung yang Tercentang

<script>
const jumlah = document.querySelectorAll(".item:checked").length;
</script>

Kesimpulan

Gunakan properti .checked (bernilai true/false) untuk mengecek atau mengatur checkbox, dan event change untuk meresponsnya. Selektor :checked memudahkan menghitung atau memilih yang tercentang.

Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi JavaScript (MDN).

Baca Juga

Ali Akbar

Software Developer yang fokus mengembangkan aplikasi berbasis Web dan Desktop. Senang mempelajari teknologi baru terutama di bidang web design dan web development.

View all posts by Ali Akbar →

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *