Bagaimanakah saya boleh menindih kotak pilihan pada imej untuk pemilihan?

Memilih Imej Menggunakan Kotak Pilihan

Memaparkan kotak pilihan di atas imej untuk pemilihan memerlukan gabungan penanda HTML dan penggayaan CSS.

Penanda HTML

Untuk memasukkan kotak pilihan dalam HTML anda, gunakan kod berikut:

<input type="checkbox" class="checkbox">

Ganti "check1" dengan ID unik untuk setiap kotak pilihan.

Penggayaan CSS

Untuk meletakkan kotak pilihan di atas imej, gunakan peraturan CSS yang menetapkan kedudukan kepada "mutlak" dan nyatakan sifat "bawah" dan "kanan" untuk "0px":

.checkbox {
  position: absolute;
  bottom: 0px;
  right: 0px;
}

JavaScript

Untuk mengendalikan klik kotak pilihan dan melakukan tindakan yang sesuai, anda boleh menggunakan pendengar acara JavaScript. Contohnya:

document.querySelectorAll('.checkbox').forEach(checkbox => {
  checkbox.addEventListener('click', event => {
    // Handle checkbox click event here
  })
});

Kes ujian langsung yang disediakan menunjukkan pelaksanaan ini, di mana setiap kotak pilihan boleh diklik untuk memilih atau menyahpilih imej yang sepadan.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menindih kotak pilihan pada imej untuk pemilihan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!