Tampilkan sembunyikan div pada kotak centang klik javascript

Question

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 menyembunyikan dan menampilkan div dalam JavaScript di kotak centang?
Bagaimana cara menampilkan konten div tersembunyi di acara klik?
Bagaimana Anda menampilkan dan menyembunyikan kolom input berdasarkan kotak centang?
Bagaimana Anda menyembunyikan dan menampilkan div menggunakan JavaScript?

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

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

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 menyembunyikan dan menampilkan div dalam JavaScript di kotak centang?

Pendekatan. .

Nama pemilih untuk kotak centang sama dengan elemen yang digunakan untuk menampilkan. isi

Properti tampilan CSS dari setiap elemen disetel ke none menggunakan display. tidak ada;

Menggunakan. toggle() metode untuk menampilkan dan menyembunyikan elemen untuk mencentang dan menghapus centang pada kotak

Bagaimana cara menampilkan konten div tersembunyi di acara klik?

Untuk menampilkan dan menyembunyikan div pada klik mouse menggunakan jQuery, gunakan metode toggle() . Pada klik mouse, div terlihat dan saat mengklik div lagi, ia bersembunyi.

Bagaimana Anda menampilkan dan menyembunyikan kolom input berdasarkan kotak centang?

Untuk menampilkan atau menyembunyikan bidang, kita menerapkan CSS melalui metode jQuery css() . Kami melewati properti tampilan CSS. Untuk menyembunyikan bidang, kami menyetel properti tampilan ke none dan untuk menampilkannya kami menyetel blok properti tampilan. Jadi, Anda telah melihat cara menampilkan atau menyembunyikan kolom input tergantung pada kolom kotak centang.

Bagaimana Anda menyembunyikan dan menampilkan div menggunakan JavaScript?

Untuk menampilkan atau menyembunyikan div dengan JavaScript, kita dapat memanipulasi gaya. properti display untuk mengubah properti tampilan CSS . Kami menampilkan div jika kami menyetelnya ke 'block' , 'inline' , atau 'inline-block'. 'block' membuatnya menjadi level blok, 'inline' membuatnya menjadi inline.

kode javascript