Bagaimana untuk Mencipta Menu Pilihan Pilihan Seperti Kotak Semak?

Mencipta Menu Pilihan Pilihan Seperti Kotak Semak

Sesetengah pengguna mungkin menghadapi keperluan untuk memaparkan menu Pilihan Pilihan dengan kotak pilihan, permintaan yang elemen HTML tradisional tidak dapat memenuhi secara langsung. Jika anda menghadapi dilema ini, jangan takut, kerana kami membentangkan penyelesaian yang menggabungkan HTML, CSS dan JavaScript untuk mensimulasikan kefungsian yang diingini.

Kod yang disediakan di bawah memanfaatkan senarai kotak pilihan yang tersembunyi dan menukar keterlihatannya secara dinamik semasa berinteraksi dengan elemen Pilih Pilihan. Berikut ialah pecahan terperinci:

Kod HTML:

Struktur HTML mencipta elemen Pilihan Pilih standard yang mengandungi pilihan pemegang tempat. Di bawah itu, div tersembunyi (dengan paparannya pada mulanya ditetapkan kepada "tiada") memegang kotak pilihan.

Kod CSS:

• Div "pilihan berbilang" mentakrifkan penggayaan keseluruhan untuk menu.
• "selectBox" meletakkan elemen Select Option secara menegak dan tindanan ia dengan div "overSelect".
• "overSelect" meliputi Pilihan Pilih dan berfungsi sebagai kawasan boleh klik untuk menunjukkan atau menyembunyikan kotak pilihan.
• "kotak pilihan" mengawal penampilan senarai kotak pilihan .

JavaScript Kod:

Fungsi JavaScript "showCheckboxes" menogol paparan div kotak pilihan. Ia dicetuskan apabila pengguna mengklik pada Pilihan Pilih.

Penggunaan:

Untuk menggunakan penyelesaian ini, tambah item Pilihan Pilihan pilihan anda sendiri dan label kotak semak pada kod HTML dan gayakannya mengikut keperluan anda.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Menu Pilihan Pilihan Seperti Kotak Semak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!