Berikut adalah contoh kode yang dapat digunakan untuk menampilkan div saat kotak centang dicentang dan menyembunyikan div saat kotak centang tidak dicentang. Kami menerapkan fungsi ini hanya menggunakan CSS
Salin Kode.div_box { border: 1px solid #aaa; padding: 10px; display: none; } .checkbox:checked + .div_box { display: block; }
Kode CSS dapat digunakan untuk menampilkan/menyembunyikan div pada kotak centang centang/hapus centang. kami menggunakan kelas semu. dicentang diterapkan pada kotak centang untuk memeriksa apakah kotak centang dicentang atau tidak dan menggunakan + kata kunci kami memilih elemen HTML berikutnya dari kotak centang tipe input yaitu div
Dalam fungsi, kami memeriksa apakah kotak centang dicentang dan jika ya, kami menyetel propertidisplay dari elemen const checkbox = document.getElementById('show'); const box = document.getElementById('box'); checkbox.addEventListener('click', function handleClick() { if (checkbox.checked) { box.style.display = 'block'; } else { box.style.display = 'none'; } }); 0 ke block untuk menampilkannya
Jika Anda menghapus centang pada kotak centang, properti display div disetel ke const checkbox = document.getElementById('show'); const box = document.getElementById('box'); checkbox.addEventListener('click', function handleClick() { if (checkbox.checked) { box.style.display = 'block'; } else { box.style.display = 'none'; } }); 3 dan elemen disembunyikan
Kami menggunakan properti display dalam contoh, namun, Anda mungkin perlu menggunakan properti visibility tergantung pada kasus penggunaan Anda
Saat properti display_ elemen disetel ke const checkbox = document.getElementById('show'); const box = document.getElementById('box'); checkbox.addEventListener('click', function handleClick() { if (checkbox.checked) { box.style.display = 'block'; } else { box.style.display = 'none'; } }); 3, elemen dihapus dari DOM dan tidak memengaruhi tata letak. Dokumen dirender seolah-olah elemennya tidak ada
Di sisi lain, ketika properti const checkbox = document.getElementById('show'); const box = document.getElementById('box'); checkbox.addEventListener('click', function handleClick() { if (checkbox.checked) { box.style.display = 'block'; } else { box.style.display = 'none'; } }); 6 elemen diatur ke const checkbox = document.getElementById('show'); const box = document.getElementById('box'); checkbox.addEventListener('click', function handleClick() { if (checkbox.checked) { box.style.display = 'block'; } else { box.style.display = 'none'; } }); 7, elemen tersebut tetap memakan ruang di halaman, namun elemen tersebut tidak terlihat (tidak digambar). Elemen tersebut masih memengaruhi tata letak halaman Anda seperti biasa
Tampilkan Elemen jika Kotak centang dicentang menggunakan visibilitas
Berikut adalah contoh yang menggunakan properti const checkbox = document.getElementById('show'); const box = document.getElementById('box'); checkbox.addEventListener('click', function handleClick() { if (checkbox.checked) { box.style.display = 'block'; } else { box.style.display = 'none'; } }); _6 untuk menampilkan elemen jika kotak centang dicentang
bobbyhadz.com
Select an option:
Show div
Box is now shown
More content here
Dan inilah JavaScript terkait
const checkbox = document.getElementById('show'); const box = document.getElementById('box'); checkbox.addEventListener('click', function handleClick() { if (checkbox.checked) { box.style.visibility = 'visible'; } else { box.style.visibility = 'hidden'; } }); _
Jika Anda memuat halaman, Anda akan melihat bahwa elemen menggunakan ruang bahkan saat disembunyikan
Meskipun elemen tersebut tidak terlihat, namun tetap mempengaruhi tata letak halaman seperti biasa
Seandainya kita menyetel properti display elemen ke const checkbox = document.getElementById('show'); const box = document.getElementById('box'); checkbox.addEventListener('click', function handleClick() { if (checkbox.checked) { box.style.display = 'block'; } else { box.style.display = 'none'; } }); 3, elemen tersebut akan dikeluarkan dari DOM dan elemen berikutnya akan mengambil tempatnya di halaman
Menggunakan properti display_ untuk menampilkan atau menyembunyikan elemen menggeser konten pada halaman, yang dapat membingungkan dan harus dihindari jika memungkinkan