Kotak centang sembunyikan dan tampilkan dalam javascript

Question

Saya telah mencoba menggunakan (ini). induk(). terdekat('. selesai_tahun'). hide() tetapi ini juga tidak berfungsi. Cocoon Gem memungkinkan untuk menambahkan beberapa detail Pendidikan sekaligus. Jadi pada waktu tertentu mungkin ada beberapa kotak centang di formulir. Ketika pengguna mencentang/menghapus centang pada kotak centang, saya ingin div terdekat untuk menyembunyikan/menampilkan

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

Table of Contents Show

Tampilkan Elemen jika Kotak centang dicentang menggunakan visibilitas
Bagaimana cara menampilkan dan menyembunyikan kotak centang di JavaScript?
Bagaimana cara menyembunyikan kotak centang di JavaScript?
Bagaimana cara menampilkan kotak centang yang dicentang dalam JavaScript?
Bagaimana cara menampilkan dan menyembunyikan kotak centang di HTML?

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

Bagaimana cara menampilkan dan menyembunyikan kotak centang di JavaScript?

Saat Kotak Centang diklik, fungsi JavaScript ShowHideDiv dijalankan . Di dalam fungsi ini, berdasarkan apakah Kotak Centang dicentang (dipilih) atau tidak dicentang (tidak dipilih), DIV HTML dengan Kotak Teks ditampilkan atau disembunyikan.

Bagaimana cara menyembunyikan kotak centang di JavaScript?

Kotak centang dari setiap item daftar dapat disembunyikan dengan menggunakan objek htmlAttributes of fields . Dengan bantuan htmlAttributes kita dapat menambahkan kelas unik ke setiap item daftar yang akan dirender dari sumber data, dari kelas CSS kita dapat menyembunyikan kotak centang dari item daftar.