Bagaimana untuk Mensimulasikan Fungsi Kotak Semak dalam Elemen Pilih Menggunakan HTML, CSS dan JavaScript?

Cara Mensimulasikan Kotak Pilihan dalam Pilihan Pilihan

Walaupun terhad untuk menambah kotak pilihan terus ke dalam elemen terpilih, adalah mungkin untuk mencapai yang serupa kesan menggunakan HTML, CSS dan JavaScript.

JavaScript Logik:

Kami mentakrifkan fungsi showCheckboxes() yang menogol paparan div tersembunyi yang mengandungi kotak pilihan.

function showCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}

Struktur HTML:

Kami mencipta div dengan kelas "multiselect" untuk mengandungi elemen pilih dan bekas kotak pilihan kami. Div "selectBox" membolehkan kami mengklik dan menogol keterlihatan kotak pilihan.

<div class="multiselect">
  <div class="selectBox" onclick="showCheckboxes()">
    <select>
      <option>Select an option</option>
    </select>
    <div class="overSelect"></div>
  </div>
  <div>

Penggayaan CSS:

Kami menggunakan gaya pada kedudukan dan memaparkan elemen dengan betul. Div "overSelect" adalah telus dan meliputi elemen pilih untuk menghalang pemilihan langsung.

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

Atas ialah kandungan terperinci Bagaimana untuk Mensimulasikan Fungsi Kotak Semak dalam Elemen Pilih Menggunakan HTML, CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!